Skip to main content

Vue-i18n: Vollständige Internationalisierung mit vue-i18n einrichten

Von der Installation bis zur Produktion: Konfigurieren Sie vue-i18n mit der Composition API, verarbeiten Sie Pluralformen nach CLDR-Regeln, verwenden Sie Komponenteninterpolation und ergänzen Sie intelligente Locale-Fallback-Ketten.

1

vue-i18n installieren

vue-i18n ist das offizielle Internationalisierungs-Plug-in für Vue.js. Es bietet reaktive Übersetzungen, Pluralbildung im ICU-Stil, Komponenteninterpolation, Datums-/Zahlenformatierung sowie Unterstützung für Options API und Composition API.

Terminal
npm install vue-i18n@9
2

vue-i18n konfigurieren

Erstellen Sie mit createI18n() eine i18n-Instanz und registrieren Sie sie als Vue-Plug-in. Definieren Sie Ihre Locale-Nachrichten, legen Sie die Standard-Locale fest und konfigurieren Sie die Fallback-Locale. vue-i18n unterstützt sowohl den Legacy-Modus (Options API) als auch den Composition-Modus (Composition API).

src/i18n.ts
// src/i18n.ts
import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import de from './locales/de.json'

const i18n = createI18n({
  legacy: false,           // Use Composition API mode
  locale: 'en',            // Default locale
  fallbackLocale: 'en',   // Fallback locale
  messages: { en, de },
})

export default i18n
src/main.ts
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

const app = createApp(App)
app.use(i18n)
app.mount('#app')
Fehler mit „Not available in legacy mode“ bedeuten, dass Sie i18n-Aufrufe der Composition API (useI18n()) mit einer Legacy-Modus-Konfiguration mischen. Setzen Sie legacy: false in createI18n(), um den Composition-API-Modus zu verwenden, oder nutzen Sie konsequent die Options-API-Syntax $t().
3

Übersetzungen in Vorlagen verwenden

vue-i18n stellt in Vorlagen die Funktion $t() (Options API) und über useI18n() die Funktion t() (Composition API) bereit. Beide akzeptieren den Übersetzungsschlüssel und optionale benannte oder Listenparameter zur Interpolation.

src/locales/en.json
// src/locales/en.json
{
  "nav": {
    "home": "Home",
    "about": "About",
    "settings": "Settings"
  },
  "greeting": "Hello, {name}!",
  "cart": {
    "itemCount": "no items | one item | {count} items"
  }
}

// src/locales/de.json
{
  "nav": {
    "home": "Startseite",
    "about": "Über uns",
    "settings": "Einstellungen"
  },
  "greeting": "Hallo, {name}!",
  "cart": {
    "itemCount": "keine Artikel | ein Artikel | {count} Artikel"
  }
}
4

Pluralformen verarbeiten

vue-i18n unterstützt Pluralbildung über durch senkrechte Striche getrennte Formen und die Funktion $tc() (Legacy) oder t() mit einem count-Parameter (Composition API). Definieren Sie Pluralformen in Ihren Locale-Nachrichten mit dem Trennzeichen: 'no items | one item | {count} items'.

MyComponent.vue
<template>
  <div>
    <!-- Simple translation -->
    <h1>{{ $t('nav.home') }}</h1>

    <!-- With variables -->
    <p>{{ $t('greeting', { name: userName }) }}</p>

    <!-- In attributes -->
    <input :placeholder="$t('nav.settings')" />

    <!-- Composition API -->
    <p>{{ greeting }}</p>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const userName = 'Alice'
const greeting = t('greeting', { name: userName })
</script>
Die durch senkrechte Striche getrennte Pluralsyntax unterstützt nur Kardinalpluralformen mit bis zu drei Formen (zero | one | other). Verwenden Sie bei Sprachen mit komplexen CLDR-Pluralregeln wie Arabisch, Russisch und Polnisch die ICU-MessageFormat-Syntax oder den Modifikator @.plural mit ausdrücklicher Zuordnung von CLDR-Kategorien.
5

Locale-Fallback-Ketten hinzufügen

Das integrierte fallbackLocale von vue-i18n unterstützt nur eine flache Liste von Fallback-Locales, keine Ketten pro Locale. Fehlt bei pt-BR ein Schlüssel, fällt die Übersetzung auf Englisch statt pt-PT zurück. vue-i18n-locale-chain ergänzt konfigurierbare Ketten mit rekursiver Zusammenführung, sodass regionale Personen stets die ähnlichste verfügbare Übersetzung sehen.

Plurals.vue
<template>
  <div>
    <!-- Pipe-separated plurals -->
    <p>{{ $t('cart.itemCount', count) }}</p>

    <!-- Named plurals (recommended for complex languages) -->
    <p>{{ $t('orders', { n: orderCount }) }}</p>
  </div>
</template>

<!-- In your locale file: -->
<!-- "orders": "{n} order | {n} orders" -->
vue-i18n-locale-chain führt Nachrichten beim Laden rekursiv zusammen. Das Reaktivitätssystem von vue-i18n speichert den zusammengeführten Nachrichtensatz zwischen, sodass Fallback-Abfragen zur Laufzeit keinen Leistungsverlust verursachen.
6

Übersetzungen automatisieren

Wenn vue-i18n konfiguriert ist, übersetzen Sie Ihre Locale-JSON-Dateien mit KI. Bitten Sie Ihren KI-Assistenten in Ihrer IDE, die Ausgangsdatei zu übersetzen, oder integrieren Sie Übersetzung für vollständig automatisierte Lokalisierung in Ihre CI/CD-Pipeline.

LanguageSwitcher.vue
<template>
  <select v-model="locale">
    <option v-for="lang in availableLocales" :key="lang" :value="lang">
      {{ lang }}
    </option>
  </select>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale, availableLocales } = useI18n()
</script>
src/i18n.ts (lazy loading)
// src/i18n.ts
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: {},
})

export async function loadLocale(locale: string) {
  const messages = await import(`./locales/${locale}.json`)
  i18n.global.setLocaleMessage(locale, messages.default)
  i18n.global.locale.value = locale
}

export default i18n
7

Konfiguration von Locale-Fallback-Ketten

Konfigurieren Sie Fallback-Ketten pro Locale, damit regionale Personen die ähnlichste verfügbare Übersetzung sehen, statt direkt zu Englisch zu wechseln. vue-i18n unterstützt fallbackLocale im Objektstil zur Definition von Ketten pro Locale.

src/i18n.ts
// src/i18n.ts
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  legacy: false,
  locale: 'pt-BR',
  fallbackLocale: {
    'pt-BR': ['pt', 'en'],
    'zh-Hant-TW': ['zh-Hant', 'zh', 'en'],
    'es-419': ['es', 'en'],
    default: ['en'],
  },
  messages: {
    en: { /* ... */ },
    pt: { /* ... */ },
    'pt-BR': { /* ... */ },
  },
})
Mit dem fallbackLocale-Objekt können Sie für unterschiedliche Locales unterschiedliche Ketten definieren. pt-BR fällt auf pt und dann en zurück, zh-Hant-TW auf zh-Hant, zh und anschließend en.

Häufige Fallstricke

Legacy- und Composition-API-Modus mischen

useI18n() mit legacy: true, dem Standardwert, verursacht Fehler. Setzen Sie legacy: false in createI18n(), wenn Sie die Composition API verwenden, oder bleiben Sie in Vorlagen bei $t() mit der Options API. Mischen Sie beide Modi nicht in derselben Anwendung.

v-html für übersetzte Zeichenfolgen verwenden

v-html zum Rendern von Übersetzungen mit HTML ist ein XSS-Risiko, wenn Interpolationswerte aus Benutzereingaben stammen. Verwenden Sie für Übersetzungen mit eingebettetem HTML oder Vue-Komponenten die Komponente &lt;i18n-t&gt; – sie ist standardmäßig sicher und unterstützt das reaktive Einbetten von Komponenten.

Regionale Personen sehen Englisch statt der übergeordneten Locale

fallbackLocale von vue-i18n ist eine flache Liste, keine Kette pro Locale. pt-BR fällt auf den Listeninhalt, üblicherweise en, zurück und überspringt pt-PT vollständig. Ergänzen Sie mit vue-i18n-locale-chain einen korrekten regionalen Fallback mit rekursiver Zusammenführung.

i18n Agent jetzt testen

Legen Sie Ihre Übersetzungsdatei hier ab

JSON, YAML, PO, XML, CSV, Markdown, Properties

oder zum Auswählen klicken

Zielsprachen

Keine Registrierung erforderlichSofortiges Angebot

Häufig gestellte Fragen zu Vue-i18n