FEAT: details page

components/list.vue

@@ -10,14 +10,15 @@
           {{ films.length }}
         </b>
       </nav>
-      <NuxtLink v-for="(film, index) in films" :key="index" :href="film.title" :to="'/details/' + 'id'"
+      <NuxtLink v-for="(film, index) in films" :key="index" :href="film.title" :to="'/details/' + film.id"
         class="hover:bg-slate-200 w-full p-4 flex-col border-b-2 border-GREY-100">
-        <img :src="imgUrl + film.poster_path" alt="">
+        <img :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
         <span class="flex flex-row">
           {{ film.title }}
           {{ film.original_title }}
           {{ film.vote_count }}
           {{ film.release_date }}
+          {{ film.id }}
         </span>
       </NuxtLink>
     </div>
@@ -25,8 +26,7 @@
 </template>
 
 <script setup lang="ts">
-const imgUrl = 'https://media.themoviedb.org/t/p/w220_and_h330_face/'
-
+const config = useRuntimeConfig()
 const terms = ref('')
 const films = ref([])
 

nuxt.config.ts

@@ -17,5 +17,10 @@ export default defineNuxtConfig({
     }
   },
 
-  compatibilityDate: '2024-07-10'
+  runtimeConfig: {
+    API_BEARER: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2MmVmZmYzYWU2YWYyNWQ0NTY4OGY3OTkxYjgyNmNhOCIsIm5iZiI6MTcyODA1NTIwMy4wNzcyNywic3ViIjoiNjcwMDA2ZjQ5ZWJlYTE5MDA2ZjgxZmJhIiwic2NvcGVzIjpbImFwaV9yZWFkIl0sInZlcnNpb24iOjF9.XuH-_0UggmULCgQQajKc-QsmlRYW2rqSenyhguE6wRU',
+    public: {
+      IMG_BASE_URL: 'https://media.themoviedb.org/t/p/w220_and_h330_face/',
+    }
+  },
 })

pages/details/[id].vue

@@ -1,12 +1,25 @@
 <template>
   <section>
-    {{ filmId }}
+    <img :src="config.public.IMG_BASE_URL + film.poster_path" :alt="film.title">
+    <span class="flex flex-row">
+      {{ film.title }}
+      {{ film.original_title }}
+      {{ film.vote_count }}
+      {{ film.release_date }}
+      {{ film.id }}
+    </span>
   </section>
 </template>
 
 <script setup lang="ts">
+const config = useRuntimeConfig()
+const film = ref()
 const route = useRoute()
 const filmId = ref('')
-
 filmId.value = route.params.id
+
+if (filmId.value !== '') {
+  const { data } = await useFetch(`/api/details/${filmId.value}`)
+  film.value = data.value
+}
 </script>

server/api/details/[id].ts

@@ -0,0 +1,13 @@
+import fetch from 'node-fetch'
+
+export default eventHandler(async (req) => {
+  const id = req.context.params?.id || ''
+  const url = `https://api.themoviedb.org/3/movie/${id}`
+  const config = useRuntimeConfig(req)
+
+  const response = await fetch(url, {
+    method: 'get',
+    headers: { 'Content-Type': 'application/json', 'Authorization': config.API_BEARER }
+  })
+  return await response.json()
+})