<template>
    <main>
        <p>{{ globalData.magasin_explication }}</p>
        <Projects :contents="magasin" />
    </main>
</template>

<script>
import Projects from '@/components/Projects.vue';

export default {
    setup() {
        const magasin = ref([]);

        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,
            itemsError
        };
    },
    components: {
        Projects
    }
};
</script>