Problème avec props

Par Clément MCA, il y a 4 ans

Javascript VueJS

Bonjour à tous,

alors j'ai créé un fichier config.json pour mon api avec vueJS, pour mettre le nom du site et ne pas à le modifier sur toutes les pages si celui-ci est changé.

il se présente comme ça:

{ "name": "Fox" }

dans mon Layout.vue

<template> <div> <TheHeader :name="name"/> <main> <slot></slot> </main> </div> </template> <script> import TheHeader from './TheHeader.vue' import { name } from '../config.json' export default{ components: { TheHeader }, data(){ return { name: name } } } </script>

ensuite, dans mon fichier TheHeader.vue je récupère le nom du site avec mon props: ['name'], que j'affiche ensuite comme ça : {{name}}

Hors j'aimerai utilisé également le nom de mon site dans mes pages, pour le coup c'est pour ma page de contact où j'ai besoin d'afficher plusieurs fois le nom du site, j'ai donc appelé mon props dans ma view mais il ne s'affiche pas.

Comment puis-je régler ce problème d'enfant/parents avec les props, sachant que j'avais essayé en premier lieu de le mettre dans mon App.vue mais j'ai eu le même soucis.

Merci beaucoup

1 réponse

gillesr, il y a 4 ans

Bonjour,

tu peux utiliser des variables d'environnement pour ça avec un fichier .env, elles seront accessibles depuis n'importe quel composant.
Avec quoi as tu generé ton projet ?
Si tu utilises webpack, tu appelles ta variable avec process.env.maVariable
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

Si tu utilises vite, il faut préfixer ta variable avec VITE. par ex: VITE_SITE_NAME et appeler import.meta.env.VITE_SITE_NAME
https://vitejs.dev/guide/env-and-mode.html