# vue: Configuration de gt-vue
URL: https://generaltranslation.com/fr/docs/vue/guides/configuring.mdx
---
title: Configuration de gt-vue
description: Comment créer un plugin de traduction Vue, charger des catalogues et configurer le rendu côté navigateur ou côté serveur.
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations

---

Créez un plugin pour chaque application Vue isolée. Le plugin gère son paramètre régional actif, les catalogues chargés et l’état réactif des traductions.

Utilisez [`createGT()`](/docs/vue/reference/functions/create-gt) pour les applications Vue classiques, y compris celles qui changent de paramètre régional sans rechargement et celles dont le rendu s’effectue côté serveur. Les SPA exécutées uniquement dans le navigateur qui nécessitent un [`t()`](/docs/vue/reference/functions/t) défini au niveau du module suivent une procédure de démarrage différente, décrite dans [Développer avec les traductions SPA](/docs/vue/guides/developing-spa-translations).

## Créez le plugin [#create]

Transmettez le paramètre régional source et un callback [`loadTranslations`](/docs/vue/reference/types/load-translations) à [`createGT()`](/docs/vue/reference/functions/create-gt), puis installez le plugin renvoyé avec `app.use()` :

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

Installez ce plugin une seule fois. Créer une autre instance lui attribue son propre paramètre régional et son propre cache de catalogue.

## Résoudre le paramètre régional initial [#initial-locale]

[`createGT()`](/docs/vue/reference/functions/create-gt) détermine le paramètre régional initial dans l’ordre suivant :

1. Une option `locale` explicite.
2. La valeur, dans le navigateur, du cookie de paramètre régional configuré.
3. `defaultLocale`.

Un paramètre régional explicite fait autorité lors du rendu côté serveur et de l’hydratation. Dans le navigateur, il remplace un cookie obsolète afin que le client démarre avec le même paramètre régional que le serveur.

```ts
const gt = createGT({
  defaultLocale: 'en',
  locale: serverLocale,
  localeCookieName: 'my-app.locale',
  loadTranslations,
});
```

Le nom de cookie par défaut est `generaltranslation.locale`. Ne modifiez `localeCookieName` que si votre routeur ou votre serveur doit partager un autre cookie.

## Charger les catalogues de traductions [#load]

Le paramètre régional par défaut est affiché directement à partir du contenu source, son loader n’est donc jamais appelé. Les autres paramètres régionaux sont chargés via [`loadTranslations`](/docs/vue/reference/types/load-translations) :

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

Les catalogues chargés avec succès sont mis en cache pendant toute la durée de vie du plugin, et les requêtes simultanées pour le même paramètre régional partagent un même chargement. Côté client, l’application peut être montée avec le contenu source pendant le chargement du premier catalogue ; les composants traduits sont réaffichés à son arrivée.

Renvoyer un objet vide utilise le contenu source comme contenu de secours. Si le callback échoue, les changements de paramètre régional échouent et le paramètre régional actuel reste actif.

## Maintenir la configuration de la CLI et du runtime synchronisées [#shared-config]

Utilisez `gt.config.json` comme référence commune pour le paramètre régional source, les paramètres régionaux cibles et l’emplacement des fichiers générés :

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

La CLI lit directement ce fichier. [`createGT()`](/docs/vue/reference/functions/create-gt) accepte ses propres options d’exécution : transmettez donc explicitement `defaultLocale` et votre loader. La liste `locales` reste utile pour votre sélecteur de langue et pour la CLI, mais un plugin réactif n’exclut pas les autres codes de langue ; c’est votre UI et votre loader qui déterminent les paramètres régionaux disponibles.

Les identifiants d’API de production doivent être utilisés par le processus CLI qui génère les traductions. N’exposez pas `GT_API_KEY` dans le code exécuté dans le navigateur.

## Configurer le rendu côté serveur [#ssr]

Créez une nouvelle instance du plugin pour chaque requête afin d’éviter toute fuite de l’état du paramètre régional et du catalogue entre les utilisateurs. Résolvez le paramètre régional de la requête, transmettez-le explicitement et préchargez son catalogue 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;
}
```

Installez le plugin renvoyé dans l’application Vue de la requête. Avant l’hydratation dans le navigateur, créez et préchargez un plugin côté client avec le même paramètre régional explicite. Si l’hydratation a lieu avant que le catalogue cible soit prêt, le contenu source peut s’afficher brièvement et provoquer une incohérence.
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales
- /docs/vue/guides/storing-translations