Dokumentation / Nuxt

Nuxt i18n, automatisiert

Lokalisieren Sie eine Nuxt-App: Vorlagen werden zu -Aufrufen, und @nuxtjs/i18n wird zu nuxt.config hinzugefügt, wobei jede Locale gebündelt und die Sprache in einem Cookie gespeichert wird.

Funktionsweise

Nuxt-Seiten und -Komponenten werden wie jede Vue-Komponente neu geschrieben; das Setup verwendet das offizielle @nuxtjs/i18n-Modul.

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.

app/pages/index.vue · vorher

<template>
  <main>
    <h1>Fresh coffee, delivered</h1>
    <NuxtLink to="/shop">Browse the shop</NuxtLink>
  </main>
</template>

app/pages/index.vue · nachher

<template>
  <main>
    <h1>{{ $t('home.fresh_coffee_delivered') }}</h1>
    <NuxtLink to="/shop">{{ $t('home.browse_the_shop') }}</NuxtLink>
  </main>
</template>

locales/en.json

{
  "home": {
    "fresh_coffee_delivered": "Fresh coffee, delivered",
    "browse_the_shop": "Browse the shop"
  }
}

Was das Setup hinzufügt

Der erste Durchlauf richtet @nuxtjs/i18n ein, falls das Projekt es noch nicht hat:

@nuxtjs/i18n in package.json und modules in nuxt.config
i18n/i18n.config.ts bündelt jedes Gebietsschema mit Pluralregeln
Eine URL pro Sprache (/es/about, die Standard-URL ohne Präfix) mit hreflang-Links von useLocaleHead()
Der erste Besuch folgt dem lang-Cookie oder dem Browser

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.