---
title: "Démarrage rapide avec Vue"
description: "Traduis avec verbatra les fichiers de locale vue-i18n de ton app Vue, de l'installation au premier texte allemand à l'écran."
type: "tutorial"
---
# Démarrage rapide avec Vue

Traduis avec verbatra les fichiers de locale vue-i18n de ton app Vue, de l'installation au premier texte allemand à l'écran.

À la fin de cette page, ton app Vue affiche un texte allemand que verbatra a traduit depuis `src/locales/en.json`, et un fichier de verrouillage fait que chaque exécution suivante ne traduit que ce qui a changé. Il te faut Node.js `^22.18.0 || >=24`, un projet Vue et une dizaine de minutes. Les quatre premières étapes ne demandent ni compte ni clé d'API.

Tu as déjà des fichiers de locale et un agent de code ? Donne-lui plutôt le prompt de [Configure verbatra avec un agent IA](https://verbatra.kreitz-webdev.de/fr/docs/start-with-ai.md) : il part des fichiers que ton projet a déjà et s'arrête avant de dépenser quoi que ce soit.

## Étapes [#étapes]

<Steps>
<Step>

### Installe la CLI [#installe-la-cli]

```bash
npm install --save-dev @verbatra/cli
```

verbatra est un outil de développement et n'est jamais livré dans ton app. Les commandes ci-dessous utilisent `npx` ; avec pnpm, yarn ou bun, lance plutôt `pnpm verbatra`, `yarn verbatra` ou `bun run verbatra`.



</Step>
<Step>

### Ajoute un fichier de locale source [#ajoute-un-fichier-de-locale-source]

Si `src/locales/en.json` existe déjà, passe cette étape. Sinon, crée-le avec deux textes, dont un avec un placeholder :

```json title="src/locales/en.json"
{
  "greeting": "Hello, {name}!",
  "cart": {
    "empty": "Your cart is empty."
  }
}
```

</Step>
<Step>

### Génère une configuration [#génère-une-configuration]

```bash
npx @verbatra/cli init --format vue-i18n-json --provider gemini --yes
```

`--format` `vue-i18n-json` est le format de fichier de `vue-i18n`. `init` trouve tes fichiers de locale, ou écrit le motif `src/locales/{locale}.json` quand il n'y en a pas encore. `--yes` reprend ce que `init` a détecté au lieu de poser des questions. Le nouveau `verbatra.config.ts` traduit de `en` vers `de` ; ajoute des codes à `targetLocales` pour d'autres langues.

</Step>
<Step>

### Prévisualise l'exécution sans clé [#prévisualise-lexécution-sans-clé]

```bash
npx @verbatra/cli translate --dry-run
```

```text output
verbatra: dry run over 1 locale, no provider call
verbatra: de done, 2 would translate
verbatra translate (dry run)
  de: 2 would translate, 0 unchanged
1 succeeded, 0 partial, 0 failed (dry run: nothing written)
[ok] dry run done in 0.0s, nothing written
next: verbatra translate (run it for real)
```

Une exécution à blanc ne construit aucun fournisseur : elle n'a pas besoin de clé, ne dépense rien et n'écrit rien.

</Step>
<Step>

### Traduis [#traduis]

```bash
cp .env.example .env
```

Ouvre `.env` et colle ta clé après `GEMINI_API_KEY=`. Pas encore de clé ? Gemini a une offre gratuite : crées-en une dans [Google AI Studio](https://aistudio.google.com/apikey). Les autres fournisseurs et leurs variables sont sur [Fournisseurs](https://verbatra.kreitz-webdev.de/fr/docs/providers.md).

```bash
npx @verbatra/cli translate
```

verbatra envoie les deux textes à Gemini, vérifie que chaque placeholder a survécu et écrit `src/locales/de.json`. La formulation dépend du modèle, par exemple :

```json title="src/locales/de.json"
{
  "greeting": "Hallo, {name}!",
  "cart": {
    "empty": "Dein Warenkorb ist leer."
  }
}
```

</Step>
<Step>

### Vérifie que chaque locale est synchronisée [#vérifie-que-chaque-locale-est-synchronisée]

```bash
npx @verbatra/cli check
```

```text output
[ok] checking the locales (0.0s)
verbatra check
  de: 0 missing, 0 stale, 2 up-to-date (in sync)
all locales in sync
```

`check` n'appelle aucun fournisseur et se termine avec `1` dès qu'une locale n'est plus synchronisée : il peut donc protéger une pull request.

</Step>
<Step>

### Charge les locales dans ton app [#charge-les-locales-dans-ton-app]

Ajoute `vue-i18n` :

```bash
npm install vue-i18n
```

Puis charge les deux fichiers et affiche la salutation :

```ts title="src/main.ts"
import { createApp } from "vue";
import { createI18n } from "vue-i18n";
import App from "./App.vue";
import de from "./locales/de.json";
import en from "./locales/en.json";

const i18n = createI18n({
  legacy: false,
  locale: "de",
  fallbackLocale: "en",
  messages: { en, de },
});

createApp(App).use(i18n).mount("#app");
```

```vue title="src/App.vue"
<template>
  <p>{{ $t("greeting", { name: "Ada" }) }}</p>
</template>
```

Lance ton app : la salutation affiche `Hallo, Ada!`.

</Step>
</Steps>

## Ce qui vient de se passer [#ce-qui-vient-de-se-passer]

- `verbatra.lock.json` enregistre un hash de chaque texte source, pour que l'exécution suivante n'envoie que les textes nouveaux ou modifiés. Voir [Le fichier de verrouillage](https://verbatra.kreitz-webdev.de/fr/docs/the-lock-file.md).
- Un résultat qui perd un placeholder est retenu, jamais écrit. Voir [Sûreté de la traduction](https://verbatra.kreitz-webdev.de/fr/docs/translation-safety.md).

Commite ensemble les fichiers de locale, `verbatra.lock.json` et `verbatra.provenance.json`.

## Optionnel : connecte ton agent de code [#optionnel--connecte-ton-agent-de-code]

<AvailableFrom version="0.12.0" />

```bash
npx @verbatra/cli init --agent
```

Avec la configuration en place, `init --agent` la garde et ajoute seulement les fichiers pour l'agent : les règles verbatra dans `AGENTS.md` (ou `CLAUDE.md`, quand c'est ton seul fichier d'instructions) et le serveur MCP verbatra, sans les outils qui dépensent, dans la configuration de projet de chaque agent de code qu'il détecte. Quels fichiers il écrit pour quel agent, et comment choisir toi-même les agents avec `--client`, c'est dans [Préparer les agents de code](https://verbatra.kreitz-webdev.de/fr/docs/cli/init.md#préparer-les-agents-de-code). `--dry-run` montre les fichiers sans les écrire.

Ou, sans la CLI, ajoute seulement le serveur MCP à ton profil utilisateur VS Code ; utilise une seule voie, jamais les deux :

[Ajouter à VS Code](vscode:mcp/install?%7B%22name%22%3A%22verbatra%22%2C%22type%22%3A%22stdio%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22%40verbatra%2Fmcp%22%5D%7D)

## Ensuite [#ensuite]

<Cards>
  <Card title="Ajouter une langue" href="https://verbatra.kreitz-webdev.de/fr/docs/add-a-language.md" description="Ajoute une locale cible et laisse une exécution la remplir." />
  <Card title="Exécuter verbatra en CI" href="https://verbatra.kreitz-webdev.de/fr/docs/ci-and-exit-codes.md" description="Fais échouer une pull request quand une locale dérive." />
  <Card title="Choisis ta stack" href="https://verbatra.kreitz-webdev.de/fr/docs/pick-your-stack.md" description="L'id de format et l'organisation de fichiers de tout autre framework." />
</Cards>