Composants Vuetify 3 pour les projets Codev
npm install codevdesign
npm install codevdesign
`
Utilisation
Pour utiliser les traductions fournies par Codev Design, vous devez d'abord configurer Vue-i18n. Voici un exemple de configuration :
`
import { createI18n } from 'vue-i18n'
import { csqcEn, csqcFr } from 'codevdesign' // Importation des traductions du package codevdesign
const imports = {
fr: import.meta.glob('@/locales/**/fr.json', {
eager: true,
import: 'default',
}),
en: import.meta.glob('@/locales/**/en.json', {
eager: true,
import: 'default',
}),
}
// Les locales disponibles
const locales = Object.keys(imports)
// Fusionner les traductions locales sans écraser les traductions existantes
const getLocaleMessages = () =>
locales.reduce(
(messages, locale) => ({
...messages,
[locale]: {
// Si la langue est 'fr', fusionner les traductions
...(locale === 'fr'
? {
...Object.values(imports[locale]).reduce(
(acc, current) => ({
...acc,
...current,
}),
{},
),
...csqcFr, // Ajouter les traductions "fr" du package directement
}
: {
...Object.values(imports[locale]).reduce(
(acc, current) => ({
...acc,
...current,
}),
{},
),
...csqcEn, // Ajouter les traductions "en" du package directement
}),
},
}),
{},
)
export default createI18n({
useScope: 'global',
messages: getLocaleMessages() || [],
locale: window.langue,
legacy: false,
globalInjection: true,
fallbackLocale: window.langue,
silentTranslationWarn: true,
})
`
Vous pouvez importer les composants directement depuis le package Codev Design comme suit :
`
import { pivFooter, pivEntete, csqcMenu, csqcAlerteErreur, csqcSnackbar } from 'codevdesign'
``