global data avec useState

This commit is contained in:
Valentin 2024-04-12 00:23:57 +02:00
parent 13d6b3682d
commit 05bb7b3cd5
8 changed files with 125 additions and 60 deletions

1
.gitignore vendored
View File

@ -5,6 +5,7 @@
.nitro .nitro
.cache .cache
dist dist
public/api
# Node dependencies # Node dependencies
node_modules node_modules

22
app.vue
View File

@ -5,23 +5,17 @@
</main> </main>
</template> </template>
<script> <script setup>
export default { let globalData = useState('globalData');
setup() {
const global = ref([]);
const { data, error } = useFetch('/api/items/global', { await callOnce(async () => {
server: true, globalData.value = await $fetch('/api/items/global')
onResponse({ request, response, options }) { globalData = globalData.value.data
global.value = response._data.data; })
},
});
provide('globalData', global);
useSeoMeta({ useSeoMeta({
ogImage: '/card.jpg', ogImage: '/card.jpg',
ogImageAlt: global.value.contact_image_titre, ogImageAlt: globalData.contact_image_titre,
twitterImage: '/card.jpg', twitterImage: '/card.jpg',
}); });
@ -37,8 +31,6 @@ export default {
} }
] ]
}); });
}
}
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -34,8 +34,12 @@
<script> <script>
export default { export default {
setup() { setup() {
const globalData = inject('globalData'); let globalData = useState('globalData');
return { globalData }; globalData = globalData.value.data;
return {
globalData
};
}, },
methods: { methods: {
isActive(path) { isActive(path) {

View File

@ -4,35 +4,34 @@
<h1 v-if="error.statusCode === 404">Erreur 404</h1> <h1 v-if="error.statusCode === 404">Erreur 404</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="global.error_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="global.error_img_title" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
setup() { setup() {
const global = ref([]); let globalData = useState('globalData');
const { data, error } = useFetch('/api/items/global', {
server: true,
onResponse({ request, response, options }) {
global.value = response._data.data;
},
});
provide('globalData', global);
return { async function fetchGlobalData() {
globalData await callOnce(async () => {
} globalData.value = await $fetch('/api/items/global')
globalData = globalData.value.data;
})
}
}, fetchGlobalData();
return {
globalData
}
},
props: { props: {
error: Object error: Object
} }
} }
</script> </script>
<style scoped> <style scoped>

View File

@ -1,13 +1,15 @@
// nitro hook to get Directus files working on ssg // nitro hook to get Directus files working on ssg
// https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts // https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts
// + ssg homemade caching to not retrieve all the files each generation
import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk'; import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
import fs from 'fs';
import path from 'path';
import { promisify } from 'util';
export default defineNuxtConfig({ export default defineNuxtConfig({
devtools: { enabled: true }, devtools: { enabled: true },
modules: [ modules: [
'nuxt-directus',
'@nuxt/image',
'@nuxtjs/seo' '@nuxtjs/seo'
], ],
runtimeConfig: { runtimeConfig: {
@ -17,6 +19,7 @@ export default defineNuxtConfig({
nitro: { nitro: {
hooks: { hooks: {
async 'prerender:routes'(routes) { async 'prerender:routes'(routes) {
const client = createDirectus(process.env.DIRECTUS_URL) const client = createDirectus(process.env.DIRECTUS_URL)
.with(staticToken(process.env.DIRECTUS_API_TOKEN)) .with(staticToken(process.env.DIRECTUS_API_TOKEN))
.with(rest()); .with(rest());
@ -34,12 +37,77 @@ export default defineNuxtConfig({
); );
for (let image of directusFiles) { for (let image of directusFiles) {
// @TODO: vérifier si le fichier existe pas déjà const fileExists = async (filePath) => !!(await fs.promises.access(filePath, fs.constants.F_OK).then(() => true).catch(() => false));
// avant de l'ajouter aux routes à prerender
routes.add(`/api/assets/${image.id}.webp`); const filePath = `./public/api/assets/${image.id}.webp`;
fileExists(filePath)
.then(exists => {
if (!exists) {
routes.add(`/api/assets/${image.id}.webp`);
}
})
.catch(error => console.error('Error:', error));
}
},
},
},
hooks: {
'nitro:build:public-assets': () => {
if (!fs.existsSync('./public/api/assets')) fs.mkdirSync('./public/api/assets', { recursive: true });
const readdir = promisify(fs.readdir);
const stat = promisify(fs.stat);
const copyFile = promisify(fs.copyFile);
async function directoryExists(directoryPath) {
try {
const stats = await fs.promises.stat(directoryPath);
return stats.isDirectory();
} catch (error) {
if (error.code === 'ENOENT') {
return false;
} else {
throw error;
}
} }
} }
async function copyFilesIfNotExist(sourceFolder, destinationFolder) {
try {
const exists = await directoryExists(sourceFolder);
if (!exists) {
console.log(`Source folder '${sourceFolder}' does not exist.`);
return;
}
const files = await readdir(sourceFolder);
for (const file of files) {
const sourceFilePath = path.join(sourceFolder, file);
const destinationFilePath = path.join(destinationFolder, file);
const sourceFileStat = await stat(sourceFilePath);
if (sourceFileStat.isFile()) {
try {
await stat(destinationFilePath);
} catch (error) {
if (error.code === 'ENOENT') {
await copyFile(sourceFilePath, destinationFilePath);
console.log(`Copied '${file}' to '${destinationFolder}'.`);
} else {
throw error;
}
}
}
}
console.log('Files copied successfully.');
} catch (error) {
console.error('Error:', error);
}
}
const sourceFolder = './.output/public/api/assets';
const destinationFolder = './public/api/assets';
copyFilesIfNotExist(sourceFolder, destinationFolder);
} }
}, },
app: { app: {
@ -50,13 +118,5 @@ export default defineNuxtConfig({
defaultLocale: 'fr', defaultLocale: 'fr',
name: 'Mahée Auffret', name: 'Mahée Auffret',
description: 'Portfolio de l\'artiste-peintre basée à Rennes Mahée Auffret' description: 'Portfolio de l\'artiste-peintre basée à Rennes Mahée Auffret'
},
directus: {
url: process.env.DIRECTUS_URL,
token: process.env.DIRECTUS_API_TOKEN
},
image: {
provider: 'ipx',
// domains: [ `${process.env.URL}/api/assets/` ]
} }
}) })

View File

@ -13,8 +13,17 @@
</main> </main>
</template> </template>
<script setup> <script>
const globalData = inject('globalData'); export default {
setup() {
let globalData = useState('globalData');
globalData = globalData.value.data;
return {
globalData
}
}
}
</script> </script>
<style lang="scss"> <style lang="scss">

View File

@ -9,16 +9,16 @@ export default {
setup() { setup() {
const galerie = ref([]); const galerie = ref([]);
const { data: itemsData, error: itemsError } = useFetch('/api/items/galerie', { server: true }); const { data: itemsData } = useFetch('/api/items/galerie', { server: true });
onMounted(async () => { onMounted(async () => {
if (!itemsError.value && itemsData.value) { if (itemsData.value) {
galerie.value = itemsData.value.data; galerie.value = itemsData.value.data;
} }
}); });
return { return {
galerie, galerie
itemsError
}; };
}, },
components: { components: {

View File

@ -12,20 +12,20 @@ export default {
setup() { setup() {
const magasin = ref([]); const magasin = ref([]);
const { data: itemsData, error: itemsError } = useFetch('/api/items/magasin', { server: true }); const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
onBeforeMount(async () => { onBeforeMount(async () => {
if (!itemsError.value && itemsData.value) { if (itemsData.value) {
magasin.value = itemsData.value.data; magasin.value = itemsData.value.data;
} }
}); });
const globalData = inject('globalData'); let globalData = useState('globalData');
globalData = globalData.value.data;
return { return {
globalData, globalData,
magasin, magasin
itemsError
}; };
}, },
components: { components: {