Chargement des premiers film au mounted du composant.

Formattage.

-<script setup lang="ts">
-
-</script>
+<script lang="ts" setup></script>
 
 
 <template>
 <template>
   <v-locale-provider>
   <v-locale-provider>
@@ -12,6 +10,4 @@
   </v-locale-provider>
   </v-locale-provider>
 </template>
 </template>
 
 
-<style scoped>
-
-</style>
+<style scoped></style>

-<script setup lang="ts">
+<script lang="ts" setup>
 //#region --import--.
 //#region --import--.
 import SearchBar from "~/components/SearchBar.vue";
 import SearchBar from "~/components/SearchBar.vue";
 import { ref } from "vue";
 import { ref } from "vue";
@@ -54,7 +54,13 @@ const fetchMovies = async (page: number) => {
     isLoadingMore.value = false;
     isLoadingMore.value = false;
   }
   }
 };
 };
-fetchMovies(1)
+//#endregion
+
+//#region --Global event--.
+onMounted(() => {
+  // Chargement des premiers films.
+  fetchMovies(1);
+});
 //#endregion
 //#endregion
 </script>
 </script>
 
 
@@ -62,14 +68,12 @@ fetchMovies(1)
   <section>
   <section>
     <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
     <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
     <!-- Barre de recherche -->
     <!-- Barre de recherche -->
-    <search-bar placeholder="Rechercher un film..."/>
+    <search-bar placeholder="Rechercher un film..." />
     <!-- Loading Skeleton -->
     <!-- Loading Skeleton -->
     <skeleton-movies-loader :is-initial-loading="isInitialLoading" :skeleton-number="20" />
     <skeleton-movies-loader :is-initial-loading="isInitialLoading" :skeleton-number="20" />
     <!-- Liste des films -->
     <!-- Liste des films -->
-<!--    <pre>{{ movies }}</pre>-->
+    <!--    <pre>{{ movies }}</pre>-->
   </section>
   </section>
 </template>
 </template>
 
 
-<style scoped>
-
-</style>
+<style scoped></style>

-<script setup lang="ts">
+<script lang="ts" setup>
 //#region --import--.
 //#region --import--.
 import { SearchIcon, XIcon } from "lucide-vue-next";
 import { SearchIcon, XIcon } from "lucide-vue-next";
 import { ref } from "vue";
 import { ref } from "vue";
@@ -14,8 +14,8 @@ defineProps({
     type: String,
     type: String,
     required: false,
     required: false,
     nullable: false,
     nullable: false,
-    default: ''
-  }
+    default: "",
+  },
 });
 });
 //#endregion
 //#endregion
 
 
@@ -30,11 +30,11 @@ const searchQuery = ref("");
     <div class="relative max-w-xl mx-auto">
     <div class="relative max-w-xl mx-auto">
       <input
       <input
         v-model="searchQuery"
         v-model="searchQuery"
-        type="text"
         :placeholder="placeholder"
         :placeholder="placeholder"
         class="w-full px-4 py-3 bg-gray-800 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
         class="w-full px-4 py-3 bg-gray-800 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
+        type="text"
         @input="console.log('debouncedSearch à prévoir')"
         @input="console.log('debouncedSearch à prévoir')"
-      >
+      />
       <button
       <button
         v-if="searchQuery"
         v-if="searchQuery"
         class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
         class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
@@ -49,6 +49,4 @@ const searchQuery = ref("");
   </section>
   </section>
 </template>
 </template>
 
 
-<style scoped>
-
-</style>
+<style scoped></style>

-<script setup lang="ts">
+<script lang="ts" setup>
 //#region --Props--.
 //#region --Props--.
 defineProps({
 defineProps({
   isInitialLoading: {
   isInitialLoading: {
@@ -10,26 +10,23 @@ defineProps({
     type: Number,
     type: Number,
     required: false,
     required: false,
     nullable: false,
     nullable: false,
-    default: 12
-  }
+    default: 12,
+  },
 });
 });
 //#endregion
 //#endregion
-
 </script>
 </script>
 
 
 <template>
 <template>
   <!-- Skeleton loader pendant le chargement initial -->
   <!-- Skeleton loader pendant le chargement initial -->
   <section v-if="isInitialLoading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
   <section v-if="isInitialLoading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
     <div v-for="i in skeletonNumber" :key="i" class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse">
     <div v-for="i in skeletonNumber" :key="i" class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse">
-      <div class="h-80 bg-gray-700"/>
+      <div class="h-80 bg-gray-700" />
       <div class="p-4">
       <div class="p-4">
-        <div class="h-6 bg-gray-700 rounded mb-3"/>
-        <div class="h-4 bg-gray-700 rounded w-2/3"/>
+        <div class="h-6 bg-gray-700 rounded mb-3" />
+        <div class="h-4 bg-gray-700 rounded w-2/3" />
       </div>
       </div>
     </div>
     </div>
   </section>
   </section>
 </template>
 </template>
 
 
-<style scoped>
-
-</style>
+<style scoped></style>

-<script setup lang="ts">
-
-</script>
+<script lang="ts" setup></script>
 
 
 <template>
 <template>
   <v-container class="mx-auto px-4 py-8">
   <v-container class="mx-auto px-4 py-8">
-    <movies-list/>
+    <movies-list />
   </v-container>
   </v-container>
 </template>
 </template>
 
 
-<style scoped>
-
-</style>
+<style scoped></style>