Vue i18n, automatisé

Comment ça marche

Le texte du modèle et {{ }} deviennent {{ 'key' }}, les attributs deviennent :placeholder="'key'", et les chaînes affichées depuis <script setup> (alertes, toasts, document.title) utilisent t() de useI18n.

Les pluriels utilisent le format de pipe de vue-i18n avec les règles de pluriel de chaque langue, et les phrases autour des liens restent un seul message avec <i18n-t>.

Les modèles écrits en Pug (<template lang="pug">) sont également traduits : h1 {{ 'key' }}, texte pipé et de bloc, input(:placeholder="'key'") et phrases autour de #[a(href) inline tags].

Le texte conservé dans <script setup> et affiché par le modèle, comme const tabs = [{ label: 'Overview' }] bouclé avec v-for, devient des clés que le modèle lit via tab.label.

Avant et après

La sortie réelle du moteur pour ce fichier. Lors d'une exécution réelle, le modèle hébergé nomme les clés à partir du contexte.

<template>
  <section>
    <h2>Invite people to {{ team.name }}</h2>
    <p>{{ seats }} {{ seats === 1 ? 'seat' : 'seats' }} left on your plan</p>
    <input placeholder="name@company.com" />
    <p>Read the <a href="/docs">docs</a> first.</p>
  </section>
</template>

<template>
  <section>
    <h2>{{ $t('invite_team.invite_people_to', { name: team.name }) }}</h2>
    <p>{{ $t('invite_team.seats_left_on_your_plan', { count: seats }, seats) }}</p>
    <input placeholder="name@company.com" />
    <p><i18n-t keypath="invite_team.read_the_first" scope="global"><template #a><a href="/docs">{{ $t('invite_team.docs') }}</a></template></i18n-t></p>
  </section>
</template>

{
  "invite_team": {
    "invite_people_to": "Invite people to {name}",
    "seats_left_on_your_plan": "{count} seat left on your plan | {count} seats left on your plan",
    "docs": "docs",
    "read_the_first": "Read the {a} first."
  }
}

Ce que l'installation ajoute

La première exécution configure vue-i18n si le projet ne l'a pas encore :

• vue-i18n dans package.json
• src/i18n.ts avec chaque locale et règles de pluriel, installé avec app.use(i18n) dans main.ts
• Une configuration createI18n existante est laissée telle quelle

Exécutez-le

L'interface CLI nécessite Node.js 22 ou une version ultérieure.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Ou ajoutez le Action GitHub et recevez une pull request à chaque push. Essayez-le d'abord sur votre propre code dans le playground.