Vue i18n, automatisiert

Funktionsweise

Vorlagentext und {{ }} werden zu {{ 'key' }}, Attribute werden zu :placeholder="'key'" und Zeichenfolgen, die aus <script setup> angezeigt werden (Warnungen, Benachrichtigungen, document.title), verwenden t() von useI18n.

Plurale verwenden das Pipe-Format von vue-i18n mit den Pluralregeln jeder Sprache, und Sätze um Links bleiben eine Nachricht mit <i18n-t>.

Vorlagen, die in Pug geschrieben sind (<template lang="pug">), werden ebenfalls übersetzt: h1 {{ 'key' }}, Pipe- und Blocktext, input(:placeholder="'key'") und Sätze um #[a(href) inline tags].

Im <script setup> aufbewahrter Text, der von der Vorlage angezeigt wird, wie const tabs = [{ label: 'Overview' }], der mit v-for durchlaufen wird, wird zu Schlüsseln, die die Vorlage über tab.label liest.

Vorher und nachher

Die tatsächliche Ausgabe der Engine für diese Datei. Bei einer echten Ausführung benennt das gehostete Modell die Schlüssel anhand des Kontexts.

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

Was das Setup hinzufügt

Der erste Durchlauf richtet vue-i18n ein, falls das Projekt es noch nicht hat:

• vue-i18n in package.json
• src/i18n.ts mit jeder Locale und Pluralregeln, installiert mit app.use(i18n) in main.ts
• Ein bestehendes createI18n-Setup bleibt unverändert

Ausführen

Die CLI benötigt Node.js 22 oder neuer.

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

Oder fügen Sie die GitHub Action und erhalten Sie bei jedem Push einen Pull Request. Probieren Sie es zuerst mit Ihrem eigenen Code im Spielbereich.