debug fetching global data error page on ssg

app.vue

@@ -1,17 +1,11 @@
 <template>
   <Header />
-  <main>
   <NuxtPage />
-  </main>
 </template>
 
 <script setup>
-    let globalData = useState('globalData');
+    let globalData = await useFetchGlobalData();
-    
+    globalData = globalData.globalData._object.$sglobalData;
-    await callOnce(async () => {
-      globalData.value = await $fetch('/api/items/global')
-      globalData = globalData.value.data
-    })
 
     useSeoMeta({
       ogImage: '/card.jpg',

components/Header.vue

@@ -33,9 +33,9 @@
 
 <script>
 export default {
-        setup() {
+    async setup() {
-            let globalData = useState('globalData');
+        let globalData = await useFetchGlobalData();
-            globalData = globalData.value.data;
+        globalData = globalData.globalData._object.$sglobalData;
 
         return {
             globalData

composables/useFetchGlobalData.js

@@ -0,0 +1,11 @@
+export const useFetchGlobalData = async () => {
+  const globalData = useState('globalData', () => {})
+
+  await callOnce(async () => {
+    globalData.value = await $fetch(`/api/items/global`)
+    globalData.value = globalData.value.data
+  })
+  return {
+    globalData
+  }
+}

error.vue

@@ -2,31 +2,24 @@
     <Header />
     <div class="error-page">
       <h1 v-if="error.statusCode === 404">Erreur 404</h1>
+      <h1 v-else>Erreur {{ error.statusCode }}</h1>
       <p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
       <img 
-            v-if="globalData != null"
             :src="`/api/assets/${globalData.error_img}.webp`"
-            :alt="global.error_img_title" />
+            :alt="globalData.error_img_title" />
     </div>
 </template>
   
 <script>
 export default {
-  setup() {
+    async setup() {
-    let globalData = useState('globalData');
+      let globalData = await useFetchGlobalData();
-
+      globalData = globalData.globalData._object.$sglobalData;
-    async function fetchGlobalData() {
-      await callOnce(async () => {
-        globalData.value = await $fetch('/api/items/global')
-        globalData = globalData.value.data;
-      })
-    }
-
-    fetchGlobalData();    
       
       return {
           globalData
       }
+      
     },
     props: {
       error: Object

nuxt.config.ts

@@ -50,6 +50,11 @@ export default defineNuxtConfig({
         }
       },
     },
+    prerender: {
+      routes: [
+        '/api/items/global'
+      ]
+    },
   },
   hooks: {
     'nitro:build:public-assets': () => {

pages/contact.vue

@@ -15,9 +15,10 @@
 
 <script>
 export default {
-    setup() {
+    async setup() {
-        let globalData = useState('globalData');
+
-        globalData = globalData.value.data;
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
 
         return {
             globalData

pages/index.vue

@@ -14,17 +14,21 @@ export default {
     setup() {
         const itemsAccueil = ref([]);
 
-        const { data: itemsData, error: itemsError } = useFetch('/api/items/images_accueil', { server: true });
+        const { data: itemsData } = useFetch('/api/items/images_accueil', { server: true });
         
         onMounted(async () => {
-            if (!itemsError.value && itemsData.value) {
+            if (itemsData.value) {
                 itemsAccueil.value = itemsData.value.data;
+                setTimeout(() => {
+                    startSlider();
+                }, 1);
             }
         });
 
+        
+
         return {
             itemsAccueil,
-            itemsError
         };
 
 

pages/magasin.vue

@@ -9,7 +9,7 @@
 import Projects from '@/components/Projects.vue';
 
 export default {
-    setup() {
+    async setup() {
         const magasin = ref([]);
 
         const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
@@ -20,8 +20,8 @@ export default {
             }
         });
 
-        let globalData = useState('globalData');
+        let globalData = await useFetchGlobalData();
-        globalData = globalData.value.data;
+        globalData = globalData.globalData._object.$sglobalData;
 
         return {
             globalData,