Début de la logique, ajout de refs + interface + de la méthode fetchMovies.

@@ -2,10 +2,55 @@
 //#region --import--.
 import SearchBar from "~/components/SearchBar.vue";
 import { ref } from "vue";
+import { useTMDB } from "~/composables/tMDB";
+//#endregion
+
+//#region --Declaration--.
+const { fetchPopularMovies } = useTMDB();
+//#endregion
+
+//#region --Type--.
+interface Movie {
+  id: number;
+  title: string;
+  poster_path: string | null;
+  vote_average: number;
+  release_date: string;
+}
 //#endregion
 
 //#region --Data/refs--.
 const isInitialLoading = ref(true);
+const isLoadingMore = ref(false);
+const movies = ref<Movie[]>([]);
+const currentPage = ref(1);
+const totalPages = ref(0);
+//#endregion
+
+//#region --Function--.
+// Fetch popular movies
+const fetchMovies = async (page: number) => {
+  try {
+    isLoadingMore.value = true;
+    const data = await fetchPopularMovies(page);
+    console.log("data in fetchMovies", data);
+
+    if (page === 1) {
+      movies.value = data.results;
+    } else {
+      movies.value = [...movies.value, ...data.results];
+    }
+
+    totalPages.value = data.total_pages;
+    currentPage.value = page;
+  } catch (error) {
+    console.error("Error fetching popular movies:", error);
+  } finally {
+    isInitialLoading.value = false;
+    isLoadingMore.value = false;
+  }
+};
+fetchMovies(1)
 //#endregion
 </script>
 
@@ -16,6 +61,8 @@ const isInitialLoading = ref(true);
     <search-bar placeholder="Rechercher un film..."/>
     <!-- Loading Skeleton -->
     <skeleton-movies-loader :is-initial-loading="isInitialLoading" :skeleton-number="20" />
+    <!-- Liste des films -->
+    <pre>{{ movies }}</pre>
   </section>
 </template>