Lingo.dev + Composants à fichier unique Vue.js

L'interface en ligne de commande de Lingo.dev prend en charge les composants à fichier unique 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 localisation 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,
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/**/*.vue"]
    }
  }
}

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

Trouver les langues prises en charge

Liste des 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 i18n

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

Comment cela fonctionne 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 la 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

Exclure des composants spécifiques de la traduction :

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

Traduction hybride

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

"buckets": {
  "vue-json": {
    "include": ["src/**/*.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 vers des fichiers séparés
• L'IA comprend le contexte des composants 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.