Lingo.dev + composants monofichiers Vue.js

La CLI Lingo.dev prend en charge les composants monofichiers Vue I18n, vous permettant de conserver les traductions à l'intérieur de vos fichiers .vue.

Remarque : si votre application Vue.js utilise des fichiers de locale JSON, utilisez le format .json pour le frontend.

Configuration rapide

Créez un fichier de configuration i18n.json à la racine de votre projet :

{
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/components/*.vue", "src/views/*.vue"]
    }
  }
}

Cette configuration définit l'anglais comme langue source, cible l'espagnol, le français et l'allemand, et traite les fichiers .vue dans les répertoires src/components et src/views.

Trouver les langues prises en charge

Listez les langues source et cible disponibles :

npx lingo.dev@latest show locale sources
npx lingo.dev@latest show locale targets

Tout traduire

Exécutez la commande suivante pour traduire tous les composants Vue :

npx lingo.dev@latest run

La CLI analyse vos composants à la recherche de blocs <i18n>, traduit le contenu nouveau ou modifié, et met à jour les traductions sur place.

Fonctionnement avec les composants Vue

Lingo.dev fonctionne directement avec la structure i18n standard de Vue :

<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  }
}
</i18n>

Après traduction, votre composant contiendra toutes les langues cibles :

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  },
  "es": {
    "welcome": "Bienvenido",
    "description": "Este es un componente Vue"
  },
  "fr": {
    "welcome": "Bienvenue",
    "description": "Ceci est un composant Vue"
  }
}
</i18n>

Configuration avancée

Exclure des fichiers

Excluez des composants spécifiques de la traduction :

"vue-json": {
  "include": ["src/components/*.vue", "src/views/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

Traduction hybride

Combinez les traductions basées sur les composants et sur les fichiers :

"buckets": {
  "vue-json": {
    "include": ["src/components/*.vue", "src/views/*.vue"]
  },
  "json": {
    "include": ["src/locales/[locale].json"]
  }
}

Cette configuration conserve les traductions spécifiques aux composants au sein des composants et stocke les traductions globales dans des fichiers JSON séparés.

Pourquoi utiliser cette approche

• Conserve les traductions avec les composants qui les utilisent
• Pas besoin d'extraire les chaînes dans des fichiers séparés
• L'IA comprend le contexte du composant pour de meilleures traductions
• Ne traduit que ce qui a changé
• Fonctionne avec les modèles recommandés de Vue I18n

Lingo.dev fournit des traductions pilotées par l'IA tout en maintenant l'architecture basée sur les composants de Vue.