Lingo.dev + .json (Vue.js)

Lingo.dev CLI traduit les fichiers JSON i18n de Vue.js tout en préservant le formatage des messages, la syntaxe d'interpolation et les conventions spécifiques à Vue. Le CLI fonctionne parfaitement avec la bibliothèque vue-i18n, maintient tout le formatage des messages Vue, préserve les placeholders comme {name}, gère correctement la liaison des messages avec la syntaxe @: et conserve intacts les placeholders d'interpolation des composants.

Configuration rapide

Configuration pour les fichiers de localisation Vue.js i18n :

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/locales/[locale].json"]
    }
  }
}

Rappel : [locale] est un placeholder qui doit rester littéralement dans la configuration, car il est remplacé par la locale réelle lors de l'exécution du CLI.

Traduire les fichiers Vue i18n

npx lingo.dev@latest i18n

Préserve le formatage des messages Vue.js, les placeholders d'interpolation et la syntaxe spécifique à vue-i18n.

Fonctionnalités Vue i18n

Interpolation de messages

{
  "message": {
    "hello": "Bonjour {name} !",
    "welcome": "Bienvenue {name}, vous avez {count} messages"
  }
}

Règles de pluralisation

{
  "car": "voiture | voitures",
  "apple": "pas de pommes | une pomme | {count} pommes"
}

Messages liés

{
  "common": {
    "name": "Nom de l'application"
  },
  "welcome": "Bienvenue sur @:common.name"
}

La syntaxe de liaison de messages @: de Vue est préservée.

Fonctionnalités avancées de Vue

Support des messages HTML

{
  "message": {
    "title": "Bienvenue sur <strong>notre plateforme</strong>",
    "link": "Visitez notre <a href='/help'>centre d'aide</a>"
  }
}

Interpolation de composants

{
  "message": {
    "terms": "J'accepte les {0}conditions d'utilisation{/0} et la {1}politique de confidentialité{/1}"
  }
}

La syntaxe des placeholders pour l'interpolation des composants reste intacte.

Formatage de date/heure et de nombres

{
  "datetime": {
    "short": "{value}",
    "long": "{value}"
  },
  "number": {
    "currency": "{value}"
  }
}

Configuration avancée

Plusieurs répertoires de localisation

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

Verrouiller les clés spécifiques à Vue

"vue-json": {
  "include": ["src/locales/[locale].json"],
  "lockedKeys": ["$vuetify", "dateTimeFormats", "numberFormats"]
}