debug fetching global data error page on ssg

This commit is contained in:
Valentin 2024-04-12 16:14:02 +02:00
parent 05bb7b3cd5
commit d9333f2189
9 changed files with 58 additions and 50 deletions

12
app.vue
View File

@ -1,17 +1,11 @@
<template> <template>
<Header /> <Header />
<main> <NuxtPage />
<NuxtPage />
</main>
</template> </template>
<script setup> <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({ useSeoMeta({
ogImage: '/card.jpg', ogImage: '/card.jpg',

View File

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

View File

@ -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
}
}

View File

@ -2,32 +2,25 @@
<Header /> <Header />
<div class="error-page"> <div class="error-page">
<h1 v-if="error.statusCode === 404">Erreur 404</h1> <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> <p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
<img <img
v-if="globalData != null"
:src="`/api/assets/${globalData.error_img}.webp`" :src="`/api/assets/${globalData.error_img}.webp`"
:alt="global.error_img_title" /> :alt="globalData.error_img_title" />
</div> </div>
</template> </template>
<script> <script>
export default { 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 { return {
globalData globalData
} }
},
},
props: { props: {
error: Object error: Object
} }

View File

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

View File

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

View File

@ -14,17 +14,21 @@ export default {
setup() { setup() {
const itemsAccueil = ref([]); 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 () => { onMounted(async () => {
if (!itemsError.value && itemsData.value) { if (itemsData.value) {
itemsAccueil.value = itemsData.value.data; itemsAccueil.value = itemsData.value.data;
setTimeout(() => {
startSlider();
}, 1);
} }
}); });
return { return {
itemsAccueil, itemsAccueil,
itemsError
}; };

View File

@ -9,7 +9,7 @@
import Projects from '@/components/Projects.vue'; import Projects from '@/components/Projects.vue';
export default { export default {
setup() { async setup() {
const magasin = ref([]); const magasin = ref([]);
const { data: itemsData } = useFetch('/api/items/magasin', { server: true }); 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 { return {
globalData, globalData,

View File

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