# Vue: Démarrage rapide
URL: https://generaltranslation.com/fr/docs/vue/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Ajoutez plusieurs langues à une application Vue en moins de 10 minutes.

À l’issue de ce guide, votre application Vue affichera du contenu en plusieurs langues et permettra aux utilisateurs de changer de paramètre régional actif sans recharger la page.

`gt-vue` s’utilise comme un plugin Vue. Il charge chaque catalogue de traductions une seule fois, le met en cache et réaffiche réactivement le contenu traduit lorsque le paramètre régional change.

**Prérequis :**

* Une application Vue 3, version 3.3 ou ultérieure
* Node.js `^20.19.0 || >=22.12.0` pour la chaîne d’outils Vite actuelle

<Callout type="info">
  **Paquet 0.x :** `gt-vue` est instable. Son API et son comportement peuvent changer d’une version à l’autre, indépendamment des packages React stables.
</Callout>

## Démarrage rapide [#quickstart]

### 1. Installez les packages

`gt-vue` gère les traductions dans votre application. [`gt`](/docs/cli/quickstart) extrait votre contenu source et génère des catalogues de traduction.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-vue
    npm install --save-dev gt
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-vue
    yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-vue
    bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-vue
    pnpm add --save-dev gt
    ```
  </Tab>
</Tabs>

### 2. Créez un fichier de configuration de traduction

Créez `gt.config.json` à la racine de votre projet. Indiquez la langue de votre contenu source, les locales cibles et le chemin de sortie des catalogues générés.

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

* `defaultLocale` correspond à la langue de votre contenu source.
* `locales` répertorie les langues cibles. Choisissez n’importe quel paramètre régional dans la [liste des paramètres régionaux pris en charge](/docs/platform/dashboard/reference/supported-locales).
* `files.gt.output` indique au CLI où enregistrer chaque catalogue. Conservez l’espace réservé `[locale]` dans le chemin.

### 3. Créez un loader de traduction

Créez un loader qui renvoie le catalogue généré pour le paramètre régional demandé :

```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 loader n’est pas appelé pour le paramètre régional par défaut, car le contenu source fait déjà office de catalogue. Le renvoi d’un objet vide permet à l’application d’afficher le contenu source lorsqu’aucun catalogue cible n’est disponible.

### 4. Enregistrez le plugin

Créez un plugin [`createGT()`](/docs/vue/reference/functions/create-gt) et installez-le avant de monter votre application :

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

Le plugin utilise le cookie de paramètre régional enregistré s&#39;il existe ; sinon, il démarre avec `defaultLocale`. Il se monte immédiatement avec le contenu source, puis se met à jour de manière réactive une fois le catalogue demandé chargé.

### 5. Marquer le contenu à traduire

Utilisez [`<T>`](/docs/vue/reference/components/t) pour le contenu enrichi des modèles et [`useGT()`](/docs/vue/reference/composables/use-gt) pour les chaînes autonomes, telles que les attributs de champs de saisie :

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT } from 'gt-vue';

const gt = useGT();
</script>

<template>
  <main>
    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

Conservez le contenu de [`<T>`](/docs/vue/reference/components/t) statique. Utilisez des [composants de variables et de branchement](/docs/vue/guides/formatting-variables) pour les valeurs d’exécution et les alternatives conditionnelles.

### 6. Ajoutez un sélecteur de langue

Récupérez le paramètre régional actuel avec [`useLocale()`](/docs/vue/reference/composables/use-locale) et modifiez-le avec [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) :

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT, useLocale, useSetLocale } from 'gt-vue';
import gtConfig from '../gt.config.json';

const gt = useGT();
const locale = useLocale();
const setLocale = useSetLocale();
const locales = [gtConfig.defaultLocale, ...gtConfig.locales];

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  await setLocale(target.value);
}
</script>

<template>
  <main>
    <label>
      Language
      <select :value="locale" @change="changeLocale">
        <option v-for="code in locales" :key="code" :value="code">
          {{ code }}
        </option>
      </select>
    </label>

    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) charge un catalogue manquant avant d’enregistrer le cookie du paramètre régional et de réafficher les consommateurs réactifs. Avec le loader ci-dessus, si un fichier est introuvable, il renvoie un catalogue vide, modifie le paramètre régional et affiche le contenu source. Si le loader échoue, le paramètre régional actuel reste actif.

### 7. S’authentifier et traduire

Authentifiez-vous auprès de General Translation :

```bash
npx gt auth
```

La commande vous guide pour vous connecter et créer des identifiants. Conservez la clé API de production générée dans votre fichier d’environnement local, et ne l’incluez ni dans le code du navigateur ni dans le contrôle de version.

Générez ensuite les catalogues de traduction :

```bash
npx gt translate
```

La CLI analyse votre code source Vue, traduit le contenu extrait et écrit un fichier JSON par paramètre régional cible dans `src/_gt/`. Relancez la commande chaque fois que votre contenu source est modifié.

### 8. Lancer et vérifier

Démarrez l&#39;application :

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm run dev
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn dev
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun run dev
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm dev
    ```
  </Tab>
</Tabs>

Ouvrez l&#39;URL locale affichée par votre serveur de développement. Choisissez `es`, `fr` ou `ja` dans le sélecteur de langue et vérifiez que le titre et l&#39;espace réservé du champ de recherche s&#39;affichent bien traduits.

## Résolution des problèmes [#troubleshooting]

<Accordions>
  <Accordion title="L’application reste dans le paramètre régional source">
    Le paramètre régional actif est enregistré dans le cookie `generaltranslation.locale`. Supprimez tout cookie obsolète, puis sélectionnez à nouveau un paramètre régional cible. Vérifiez également que son fichier JSON se trouve dans `src/_gt/` et que le loader renvoie son export par défaut.
  </Accordion>

  <Accordion title="Une chaîne traduite ne se met pas à jour après un changement de paramètre régional">
    Appelez la fonction renvoyée par [`useGT()`](/docs/vue/reference/composables/use-gt) depuis le modèle ou une propriété calculée Vue. Une chaîne traduite une seule fois lors de l’initialisation est un instantané et n’est pas réévaluée lorsque l’état réactif du paramètre régional change.
  </Accordion>
</Accordions>

## Next steps

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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.