Internazionalizzazione Vue, automatizzata

Come funziona

Il testo del template e {{ }} diventano {{ 'key' }}, gli attributi diventano :placeholder="'key'", e le stringhe visualizzate da <script setup> (avvisi, toast, document.title) utilizzano t() da useI18n.

I plurali utilizzano il formato pipe di vue-i18n con le regole di pluralizzazione di ogni lingua, e le frasi intorno ai link rimangono un unico messaggio con <i18n-t>.

I template scritti in Pug (<template lang="pug">) vengono tradotti anch’essi: h1 {{ 'key' }}, testo pipe e a blocco, input(:placeholder="'key'"), e frasi intorno a #[a(href) inline tags].

Il testo mantenuto in <script setup> e visualizzato dal template, come const tabs = [{ label: 'Overview' }] iterato con v-for, diventa chiavi che il template legge tramite tab.label.

Prima e dopo

L'output effettivo del motore per questo file. In un'esecuzione reale, il modello ospitato nomina le chiavi dal contesto.

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

Cosa aggiunge la configurazione

La prima esecuzione imposta vue-i18n se il progetto non lo ha ancora:

• vue-i18n in package.json
• src/i18n.ts con tutte le localizzazioni e regole di pluralità, installato con app.use(i18n) in main.ts
• Un'impostazione esistente di createI18n rimane invariata

Eseguilo

La CLI richiede Node.js 22 o versioni successive.

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

Oppure aggiungi la GitHub Action e ottieni una pull request a ogni push. Provalo prima sul tuo codice nel playground.