debug fetching global data error page on ssg

app.vue

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

components/Header.vue

@@ -32,21 +32,21 @@
 </template>
 
 <script>
-    export default {
-        setup() {
-            let globalData = useState('globalData');
-            globalData = globalData.value.data;
-            
-            return {
-                globalData
-            };
+export default {
+    async setup() {
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
+
+        return {
+            globalData
+        };
+    },
+    methods: {
+        isActive(path) {
+            return this.$route.path === path;
         },
-        methods: {
-            isActive(path) {
-                return this.$route.path === path;
-            },
-        }
     }
+}
 </script>
 
 <style lang="scss">

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,32 +2,25 @@
     <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() {
-    let globalData = useState('globalData');
-
-    async function fetchGlobalData() {
-      await callOnce(async () => {
-        globalData.value = await $fetch('/api/items/global')
-        globalData = globalData.value.data;
-      })
-    }
-
-    fetchGlobalData();    
+    async setup() {
+      let globalData = await useFetchGlobalData();
+      globalData = globalData.globalData._object.$sglobalData;
       
-    return {
-      globalData
-    }
-  },
+      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,10 +15,11 @@
 
 <script>
 export default {
-    setup() {
-        let globalData = useState('globalData');
-        globalData = globalData.value.data;
-    
+    async setup() {
+
+        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');
-        globalData = globalData.value.data;
+        let globalData = await useFetchGlobalData();
+        globalData = globalData.globalData._object.$sglobalData;
 
         return {
             globalData,

server/api/[...].ts

@@ -8,7 +8,7 @@ import { joinURL } from 'ufo'
 export default defineEventHandler(async (event) => {
     const proxyUrl = useRuntimeConfig().apiURL    
     
-    if (event.path.startsWith('/api')) {
+    if (event.path.startsWith('/api')) {        
         const path = event.path.replace(/^\/api\//, '')
 
         const target = joinURL(proxyUrl, path)