# vue: Stocker les traductions localement
URL: https://generaltranslation.com/fr/docs/vue/guides/storing-translations.mdx
---

title: Stocker les traductions localement
description: Comment générer, empaqueter et charger les catalogues de traductions gt-vue avec votre application.
related:
  links:
    - /docs/vue/guides/configuring
    - /docs/vue/guides/developing-spa-translations
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/translating-content

---

`gt-vue` reçoit les catalogues des paramètres régionaux cibles via un callback [`loadTranslations`](/docs/vue/reference/types/load-translations). Générez ces catalogues dans votre arborescence source afin de les empaqueter avec l’application et d’éviter toute dépendance à un service de traduction à l’exécution.

Les catalogues empaquetés intègrent les mises à jour de traductions à votre déploiement. Régénérez et redéployez l’application chaque fois que le contenu source ou une traduction est modifié.

## Configurez le chemin de sortie [#configure]

Définissez la sortie `gt` dans `gt.config.json` sur un chemin situé dans votre répertoire source. Le placeholder `[locale]` crée un fichier par paramètre régional cible :

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

Le paramètre régional par défaut n’a pas besoin de fichier de catalogue, car son contenu source est déjà présent dans l’application.

## Générer les catalogues [#generate]

Exécutez la CLI après avoir ajouté ou modifié du contenu à traduire :

```bash
npx gt translate
```

La commande extrait les utilisations prises en charge de [`<T>`](/docs/vue/reference/components/t), [`useGT()`](/docs/vue/reference/composables/use-gt), [`msg()`](/docs/vue/reference/functions/msg) et [`t()`](/docs/vue/reference/functions/t), puis écrit les fichiers correspondant au paramètre régional cible. Considérez ces fichiers comme du contenu généré et ne les modifiez pas manuellement.

Ajoutez la génération des traductions avant le build de production afin que chaque déploiement inclue les catalogues à jour :

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && vue-tsc -b && vite build"
  }
}
```

La CLI requiert `GT_PROJECT_ID` et `GT_API_KEY` dans l’environnement de build. Ne mettez pas la clé de production dans le bundle du navigateur.

## Charger les catalogues avec Vite [#vite]

Créez un callback [`loadTranslations`](/docs/vue/reference/types/load-translations) dont le chemin d’importation correspond à la sortie configurée :

```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;
```

Transmettez-le à [`createGT()`](/docs/vue/reference/functions/create-gt) pour un chargement réactif ou à [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) pour une SPA préchargée s’exécutant uniquement dans le navigateur.

Le callback ci-dessus traite un fichier manquant comme un catalogue vide, de sorte que le contenu source s’affiche pour ce paramètre régional. Laissez plutôt l’erreur se propager lorsque l’absence d’un catalogue de production doit bloquer le changement de paramètre régional ou l’initialisation de l’application.

## Utilisez des imports explicites si nécessaire [#explicit-imports]

Certains bundlers ne peuvent pas détecter tous les fichiers référencés par un import dynamique. Définissez une table statique de loaders afin que chaque cible soit visible lors du build :

```ts title="src/loadTranslations.ts"
import type { LoadTranslations } from 'gt-vue';

const loaders = {
  es: () => import('./_gt/es.json'),
  fr: () => import('./_gt/fr.json'),
};

const loadTranslations: LoadTranslations = async (locale) => {
  const load = loaders[locale as keyof typeof loaders];
  return load ? (await load()).default : {};
};

export default loadTranslations;
```

Maintenez cette table synchronisée avec `locales` dans `gt.config.json`. Renvoyer `{}` convient pour un paramètre régional volontairement non pris en charge ; rejeter la promesse rend l’échec visible pour l’appelant.

## Charger depuis une autre source [#custom-source]

Le callback peut récupérer un catalogue depuis votre propre endpoint plutôt que d’importer un fichier intégré au bundle :

```ts
const loadTranslations: LoadTranslations = async (locale) => {
  const response = await fetch(`/translations/${locale}.json`);
  if (!response.ok) throw new Error(`Catalog unavailable for ${locale}`);
  return response.json();
};
```

[`createGT()`](/docs/vue/reference/functions/create-gt) met en cache chaque catalogue chargé avec succès pendant toute la durée de vie de son instance de plugin et déduplique les chargements simultanés. Validez les réponses à la périphérie de votre endpoint ; le runtime attend un [`TranslationCatalog`](/docs/vue/reference/types/translation-catalog) complet, indexé par hachage, pour le paramètre régional demandé.
## Next steps

- /docs/vue/guides/configuring
- /docs/vue/guides/developing-spa-translations
- /docs/vue/guides/managing-locales
- /docs/vue/guides/translating-content