middleware proxy api et optimisation ssg

pages/contact.vue

@@ -1,13 +1,10 @@
 <template>
     <main id="contact">
-        <div v-if="globalData.contact_image">
-            <NuxtImg 
-                :src="img(globalData.contact_image)" 
+        <div>
+            <img 
+                :src="`/api/assets/${globalData.contact_image}.webp`"
                 :alt="globalData.contact_image_titre"
-                format="webp"
-                placeholder
-                lazy
-                sizes="sm:40vw" />
+            />
         </div>
         <div>
             <p>{{ globalData.contact_texte }}</p>
@@ -18,7 +15,6 @@
 
 <script setup>
     const globalData = inject('globalData');
-    const { getThumbnail : img } = useDirectusFiles();
 </script>
 
 <style lang="scss">

pages/galerie.vue

@@ -7,15 +7,18 @@ import Projects from '@/components/Projects.vue';
 
 export default {
     setup() {
-        const { getItems } = useDirectusItems();
         const galerie = ref([]);
+
+        const { data: itemsData, error: itemsError } = useFetch('/api/items/galerie', { server: true });
         onMounted(async () => {
-            const items = await getItems({ collection: "galerie" });
-            galerie.value = items;
+            if (!itemsError.value && itemsData.value) {
+                galerie.value = itemsData.value.data;
+            }
         });
 
         return {
-            galerie
+            galerie,
+            itemsError
         };
     },
     components: {

pages/index.vue

@@ -1,67 +1,75 @@
 <template>
     <main>
         <div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
-            <NuxtImg
-                :src="img(image.image_accueil)"
+            <img
+                :src="`/api/assets/${image.image_accueil}.webp`"
                 :alt="image.titre"
-                format="webp"
-                placeholder
-                lazy
-                sizes="sm:150vw" />
+            />
        </div>
     </main>
 </template>
 
-<script setup>
-    const { getItems } = useDirectusItems();
+<script>
+export default {
+    setup() {
+        const itemsAccueil = ref([]);
 
-    const itemsAccueil = await getItems({
-        collection: "images_accueil"
-    });
-
-    const { getThumbnail : img } = useDirectusFiles();
-
-    onMounted(() => {
-        const imgs = document.querySelectorAll('.indexImg img');
+        const { data: itemsData, error: itemsError } = useFetch('/api/items/images_accueil', { server: true });
         
-        const showingTime = 5000, transitionTime = 2000;
+        onMounted(async () => {
+            if (!itemsError.value && itemsData.value) {
+                itemsAccueil.value = itemsData.value.data;
+            }
+        });
 
-        for (let img of imgs) {
-            img.addEventListener('click', function() {
-                nextSlide();
-                resetTimer();
-            });
-            img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
-        }
+        return {
+            itemsAccueil,
+            itemsError
+        };
 
-        imgs[0].style.opacity = 1;
 
-        let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
+        function startSlider() {
+            const imgs = document.querySelectorAll('.indexImg img');
+            
+            const showingTime = 5000, transitionTime = 2000;
 
-        let index = 1;
-
-        function nextSlide() {
-            if (index === 0) {
-                imgs[imgs.length - 1].style.opacity = 0;
-                imgs[index].style.opacity = 1;
-            } else {
-                imgs[index - 1].style.opacity = 0;
-                imgs[index].style.opacity = 1;
+            for (let img of imgs) {
+                img.addEventListener('click', function() {
+                    nextSlide();
+                    resetTimer();
+                });
+                img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
             }
 
-            if (index === imgs.length - 1) {
-                index = 0;
-            } else {
-                index ++;
+            imgs[0].style.opacity = 1;
+
+            let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
+
+            let index = 1;
+
+            function nextSlide() {
+                if (index === 0) {
+                    imgs[imgs.length - 1].style.opacity = 0;
+                    imgs[index].style.opacity = 1;
+                } else {
+                    imgs[index - 1].style.opacity = 0;
+                    imgs[index].style.opacity = 1;
+                }
+
+                if (index === imgs.length - 1) {
+                    index = 0;
+                } else {
+                    index ++;
+                }
+            }
+
+            function resetTimer() {
+                clearInterval(diapoTimer);
+                diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
             }
         }
-
-        function resetTimer() {
-            clearInterval(diapoTimer);
-            diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
-        }
-    });
-
+    }
+};
 </script>
 
 <style lang="scss">

pages/magasin.vue

@@ -10,18 +10,22 @@ import Projects from '@/components/Projects.vue';
 
 export default {
     setup() {
-        const { getItems } = useDirectusItems();
         const magasin = ref([]);
-        onMounted(async () => {
-            const items = await getItems({ collection: "magasin" });
-            magasin.value = items;
+
+        const { data: itemsData, error: itemsError } = useFetch('/api/items/magasin', { server: true });
+
+        onBeforeMount(async () => {
+            if (!itemsError.value && itemsData.value) {
+                magasin.value = itemsData.value.data;
+            }
         });
 
         const globalData = inject('globalData');
 
         return {
             globalData,
-            magasin
+            magasin,
+            itemsError
         };
     },
     components: {