yeah

app/pages/card/[slug].vue

@@ -0,0 +1,43 @@
+<template>
+  <section class="screen-centered">
+    <Card :card="card" :isFaceUp="isFaceUp" @click="clickOnSlugCard" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Card } from '~~/types/types'
+const route = useRoute()
+const slug = route.params.slug as string
+const isFaceUp = ref(false)
+
+const { data: card, pending, error } = await useFetch<Card>(`/api/card/${slug}`)
+
+useHead({
+  title: computed(() =>
+    card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
+  )
+})
+
+const clickOnSlugCard = () => {
+  isFaceUp.value = true
+  const audio = new Audio(card.value?.url_audio)
+  audio.play()
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    clickOnSlugCard()
+  }, 700)
+})
+</script>
+
+<style>
+.screen-centered {
+  position: fixed;
+  inset: 0;
+  height: 100dvh;
+  width: 100dvw;
+  display: grid;
+  place-items: center;
+}
+</style>