Vue i18n, automatizado

Cómo funciona

El texto de la plantilla y {{ }} se convierten en {{ 'key' }}, los atributos se convierten en :placeholder="'key'", y las cadenas que se muestran desde <script setup> (alertas, notificaciones, document.title) usan t() de useI18n.

Los plurales usan el formato de barra vertical de vue-i18n con las reglas de plural de cada idioma, y las oraciones alrededor de los enlaces permanecen como un solo mensaje con <i18n-t>.

Las plantillas escritas en Pug (<template lang="pug">) también se traducen: h1 {{ 'key' }}, texto con pipe y de bloque, input(:placeholder="'key'") y frases alrededor de #[a(href) inline tags].

El texto que se mantiene en <script setup> y se muestra en la plantilla, como const tabs = [{ label: 'Overview' }] repetido con v-for, se convierte en claves que la plantilla lee a través de tab.label.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

<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."
  }
}

Lo que añade la configuración

La primera ejecución configura vue-i18n si el proyecto aún no lo tiene:

• vue-i18n en package.json
• src/i18n.ts con cada locale y reglas de plural, instalado con app.use(i18n) en main.ts
• Una configuración createI18n existente se deja como está

Ejecutarlo

La CLI necesita Node.js 22 o posterior.

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

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.