Blocs i18n Vue

Traduction IA pour les blocs i18n Vue avec Lingo.dev CLI

Que sont les blocs Vue i18n ?

Les blocs Vue i18n sont des sections spéciales <i18n> dans les composants monofichiers Vue (SFC) qui contiennent des traductions au format JSON. Ils vous permettent de conserver les traductions à côté de votre code de composant.

Par exemple :

<template>
  <div class="container">
    <h1>{{ $t('welcome') }}</h1>
    <button @click="handleClick">{{ $t('button.submit') }}</button>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

Qu'est-ce que Lingo.dev CLI ?

Lingo.dev CLI est une CLI gratuite et open-source pour traduire des applications et du contenu avec l'IA. Elle est conçue pour remplacer les logiciels traditionnels de gestion de traduction tout en s'intégrant aux pipelines existants.

Pour en savoir plus, consultez Vue d'ensemble.

À propos de ce guide

Ce guide explique comment traduire les blocs Vue i18n avec Lingo.dev CLI.

Vous apprendrez comment :

  • Créer un projet à partir de zéro
  • Configurer un pipeline de traduction
  • Générer des traductions avec l'IA

Prérequis

Pour utiliser Lingo.dev CLI, assurez-vous que Node.js v18+ est installé :

❯ node -v
v22.17.0

Étape 1. Configurer un projet

Dans le répertoire de votre projet, créez un fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Ce fichier définit le comportement du pipeline de traduction, y compris les langues à traduire et l'emplacement du contenu localisable dans le système de fichiers.

Pour en savoir plus sur les propriétés disponibles, consultez i18n.json.

Étape 2. Configurer la locale source

La locale source est la langue et la région d'origine dans lesquelles votre contenu a été rédigé. Pour configurer la locale source, définissez la propriété locale.source dans le fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

La locale source doit être fournie sous forme de balise de langue BCP 47.

Pour la liste complète des codes de locale pris en charge par Lingo.dev CLI, consultez Codes de locale pris en charge.

Étape 3. Configurer les locales cibles

Les locales cibles sont les langues et régions vers lesquelles vous souhaitez traduire votre contenu. Pour configurer les locales cibles, définissez la propriété locale.targets dans le fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Étape 4. Créer le contenu source

Si ce n'est pas déjà fait, créez un fichier de composant Vue avec un bloc <i18n> contenant le contenu à traduire.

Remarque : pendant le processus de traduction, les fichiers de contenu source seront écrasés pour inclure le contenu traduit (en plus du contenu source).

Étape 5. Créer un bucket

  1. Dans le fichier i18n.json, ajoutez un objet "vue-json" à l'objet buckets :

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {}
  }
}

  2. Dans l'objet "vue-json", définissez un tableau d'un ou plusieurs motifs include :

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  }
}

    Ces motifs définissent quels fichiers traduire et peuvent soit :

    • pointer vers des chemins de fichiers spécifiques (par ex., "some/dir/file.vue")
    • utiliser des astérisques comme caractères génériques (par ex., "some/dir/*.vue")

    Les motifs glob récursifs (par ex., **/*.vue) ne sont pas pris en charge.

Étape 6. Configurer un LLM

Lingo.dev CLI utilise des grands modèles de langage (LLMs) pour traduire du contenu avec l'IA. Pour utiliser l'un de ces modèles, vous avez besoin d'une clé API d'un fournisseur pris en charge.

Pour démarrer le plus rapidement possible, nous recommandons d'utiliser Lingo.dev Engine — notre propre plateforme hébergée qui offre 10 000 tokens d'utilisation mensuelle gratuite :

  1. Créez un compte Lingo.dev.

  2. Exécutez la commande suivante :

    npx lingo.dev@latest login

    Cela ouvrira votre navigateur par défaut et vous demandera de vous authentifier.

  3. Suivez les instructions.

Étape 7. Générer les traductions

Dans le répertoire qui contient le fichier i18n.json, exécutez la commande suivante :

npx lingo.dev@latest run

Cette commande :

  1. Lit le fichier i18n.json.
  2. Trouve les fichiers qui doivent être traduits.
  3. Extrait le contenu traduisible des fichiers.
  4. Utilise le LLM configuré pour traduire le contenu extrait.
  5. Écrit le contenu traduit dans le système de fichiers.

La première fois que les traductions sont générées, un fichier i18n.lock est créé. Ce fichier garde une trace du contenu qui a été traduit, évitant ainsi des retraductions inutiles lors des exécutions ultérieures.

Exemple

example.vue (avant traduction)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  }
}
</i18n>

example.vue (après traduction)

<i18n>
{
  "en": {
    "welcome": "Hello, world!",
    "description": "A simple demo app",
    "button": {
      "submit": "Submit",
      "cancel": "Cancel"
    }
  },
  "es": {
    "welcome": "¡Hola, mundo!",
    "description": "Una aplicación de demostración simple",
    "button": {
      "submit": "Enviar",
      "cancel": "Cancelar"
    }
  }
}
</i18n>

i18n.json

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "vue-json": {
      "include": ["./example.vue"]
    }
  },
  "$schema": "https://lingo.dev/schema/i18n.json"
}

i18n.lock

version: 1
checksums:
  7142a39dd2be0c1e12089c922ab4fdb5:
    welcome: 1308168cca4fa5d8d7a0cf24e55e93fc
    description: 36349ca88e416a6f2d6ac8742f0a963c
    button/submit: dabdff794b5804b8f22ecab13f37fb7d
    button/cancel: efdc4af6863f1e503a7f9961be721eed
    messages/0: f77d23a0a4b7f8fc7f8fd458921b90dd
    messages/1: e841c4139402ded42079401299e4fa1e
  0378a0d09447bf0944e842f7e54d3ec2:
    welcome: 0468579ef2fbc83c9d520c2f2f1c5059
    description: 49f8864eb0e53903f04532bf33e1e4fa
    button/submit: 7c91ef5f747eea9f77a9c4f23e19fb2e
    button/cancel: 2e2a849c2223911717de8caa2c71bade
    messages/0: 97a8db12c3955a85c4f50e3951c91a40
    messages/1: 986a434e3895c8ee0b267df95cc40051