# vue: Configuration URL: https://generaltranslation.com/fr/docs/vue/reference/config.mdx --- title: Configuration description: Configurez la génération de catalogues et l’initialisation à l’exécution pour une application Vue. Référence de configuration pour Vue. --- La configuration a deux consommateurs indépendants. La CLI `gt` lit `gt.config.json` pour trouver le contenu source et écrire les catalogues, tandis que votre application transmet des options d’exécution à [`createGT()`](/docs/vue/reference/functions/create-gt) ou [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). `gt-vue` ne détecte ni ne lit automatiquement `gt.config.json`. Importez explicitement les valeurs partagées et fournissez des fonctions telles que [`loadTranslations`](/docs/vue/reference/types/load-translations) dans le code de l’application. ## Vue d’ensemble [#overview] | Surface | Objectif | Configuration | | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | `gt.config.json` | Extraire le contenu source et générer des catalogues de traduction. | Champs de CLI sérialisables en JSON, tels que `projectId`, `defaultLocale`, `locales`, `src`, `files` et `customMapping`. | | [`createGT()`](/docs/vue/reference/functions/create-gt) | Créer un plugin isolé pour l’affichage réactif côté client ou le rendu côté serveur dans le contexte d’une requête. | [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) | | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Créer et précharger le plugin global du navigateur utilisé par [`t()`](/docs/vue/reference/functions/t) au niveau du module. | [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) | Les champs réservés à la CLI `projectId`, `src` et `files` sont ignorés par l’exécution. Les champs réservés à l’exécution `locale`, `localeCookieName` et `loadTranslations` ne peuvent pas être entièrement représentés en JSON. `defaultLocale` est partagé par toutes les surfaces ; `locales` et `customMapping` sont également acceptés par l’initialiseur SPA. ## `gt.config.json` [#config-file] Placez `gt.config.json` à la racine du projet. Cette configuration Vue analyse des motifs glob de source explicites et génère un catalogue pour chaque paramètre régional cible : ```json title="gt.config.json" { "$schema": "https://assets.gtx.dev/config-schema.json", "defaultLocale": "en", "locales": ["es", "fr"], "src": ["src/**/*.{vue,js,jsx,mjs,cjs,ts,tsx,mts,cts}"], "files": { "gt": { "output": "src/_gt/[locale].json" } } } ``` Les entrées `src` sont des motifs glob. Un répertoire seul tel que `"src"` ne sélectionne pas récursivement des fichiers ; indiquez les fichiers et extensions que la CLI doit analyser. Les valeurs par défaut de Vue couvrent les composants monofichiers à la racine ainsi que les répertoires Vue et Nuxt conventionnels lorsque `src` est omis. | Champ | Utilisation avec Vue | Utilisation à l’exécution | | ------------------------------------------------------------ | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `$schema` | Ajoute la validation et l’autocomplétion dans l’éditeur. | Aucune | | `projectId` | Sélectionne le projet General Translation utilisé par la CLI. | Aucune | | [`defaultLocale`](/docs/cli/reference/config#default-locale) | Déclare le paramètre régional source. | Transmettez-le à l’un des deux initialiseurs d’exécution. | | [`locales`](/docs/cli/reference/config#locales) | Déclare les paramètres régionaux cibles générés par la CLI. | Transmettez-les à [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) pour rejeter les paramètres régionaux enregistrés ou demandés qui ne sont pas pris en charge. Un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) ne restreint pas les codes de langue. | | [`src`](/docs/cli/reference/config#src) | Sélectionne les fichiers source Vue, JavaScript et TypeScript à extraire. | Aucune | | [`files.gt.output`](/docs/cli/reference/config#files) | Définit le chemin du catalogue généré. Conservez l’espace réservé `[locale]`. | Configurez le loader pour qu’il importe depuis le même répertoire. | | [`customMapping`](/docs/cli/reference/config#custom-mapping) | Applique des alias de paramètres régionaux lors de la génération des traductions. | Transmettez-le à [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) afin que les mappings d’objets avec un `code` valide puissent déterminer la correspondance des paramètres régionaux et la résolution du paramètre régional des formateurs. | Consultez la [référence de configuration de la CLI](/docs/cli/reference/config) pour tous les champs relatifs au projet, aux fichiers, à la publication, à la révision et aux branches. Conservez `GT_API_KEY` dans l’environnement de la CLI ; ne placez pas d’identifiants de production dans `gt.config.json` ni dans le code exécuté dans le navigateur. ## Options d’exécution [#runtime-options] | Option | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Par défaut | | ------------------ | ------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------ | | `defaultLocale` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `en` | | `loadTranslations` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Catalogue vide | | `locale` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Cookie du navigateur, puis `defaultLocale` | | `localeCookieName` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `generaltranslation.locale` | | `locales` | Non | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Sans restriction | | `customMapping` | Non | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | Aucune | Consultez [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) et [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) pour obtenir la description complète des options. La transmission de `{ ...gtConfig, loadTranslations }` à l’initialiseur SPA est prise en charge : il utilise les champs communs et ignore les autres champs de la CLI à l’exécution. ## Chargement du catalogue [#catalog-loading] Le chemin de sortie et celui du loader doivent désigner les mêmes fichiers : ```ts title="src/loadTranslations.ts" import type { LoadTranslations } from 'gt-vue'; const loadTranslations: LoadTranslations = async (locale) => { try { return (await import(`./_gt/${locale}.json`)).default; } catch { return {}; } }; export default loadTranslations; ``` Le paramètre régional par défaut utilise le texte source et n’appelle jamais le loader. Les catalogues cibles chargés avec succès sont mis en cache pour chaque plugin, et les requêtes simultanées pour un même paramètre régional partagent une promesse. Un appel au loader qui échoue est consigné et relancé ; il n’est pas mis en cache, ce qui permet à un appel ultérieur de réessayer. L’installation d’un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) lance son chargement initial en arrière-plan et affiche le contenu source jusqu’à l’arrivée du catalogue. [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) attend en revanche la fin du chargement initial avant de renvoyer. ## Configuration réactive [#reactive-setup] Utilisez [`createGT()`](/docs/vue/reference/functions/create-gt) pour une application cliente standard. Transmettez explicitement les champs d’exécution, car `locales`, `src` et `files` ne sont pas inclus dans [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) : ```ts title="src/main.ts" import { createApp } from 'vue'; import { createGT } from 'gt-vue'; import App from './App.vue'; import gtConfig from '../gt.config.json'; import loadTranslations from './loadTranslations'; const gt = createGT({ defaultLocale: gtConfig.defaultLocale, loadTranslations, }); createApp(App).use(gt).mount('#app'); ``` Pour le rendu côté serveur, créez un nouveau plugin pour chaque requête, transmettez explicitement le paramètre régional de la requête et préchargez-le avant le rendu : ```ts title="src/gt-server.ts" import { createGT } from 'gt-vue'; import loadTranslations from './loadTranslations'; export async function createRequestGT(locale: string) { const gt = createGT({ defaultLocale: 'en', locale, loadTranslations }); await gt.loadTranslations(locale); return gt; } ``` Utilisez le même paramètre régional explicite et un catalogue préchargé avant d’hydrater le client. Un plugin serveur partagé peut entraîner des fuites d’état du paramètre régional et du catalogue d’une requête à l’autre. ## SPA côté navigateur [#browser-spa] Utilisez [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) uniquement dans une application monopage s’exécutant uniquement dans le navigateur et appelant [`t()`](/docs/vue/reference/functions/t) au niveau du module. Attendez la fin de l’initialisation avant d’importer dynamiquement les modules de l’application, puis installez exactement le plugin renvoyé : ```ts title="src/index.ts" import { initializeGTSPA } from 'gt-vue'; import gtConfig from '../gt.config.json'; import loadTranslations from './loadTranslations'; async function bootstrap() { const gt = await initializeGTSPA({ ...gtConfig, loadTranslations }); const { mount } = await import('./main'); mount(gt); } void bootstrap().catch((error: unknown) => { console.error(error); }); ``` Le premier appel contrôle l’exécution de l’ensemble de la page. Les changements de paramètre régional mettent à jour le cookie et rechargent le document, ce qui permet aux traductions au niveau du module de s’exécuter à nouveau avec le catalogue préchargé mis à jour. Pour des changements réactifs de paramètre régional sans rechargement, utilisez [`createGT()`](/docs/vue/reference/functions/create-gt) et traduisez les chaînes des composants avec [`useGT()`](/docs/vue/reference/composables/use-gt).