Vue + vue-i18n: Der komplette Internationalisierungs-Guide [2026]

Schnelle Antwort

Um Internationalisierung in Vue mit vue-i18n zu implementieren, musst du das Paket installieren, deine Sprach-Provider konfigurieren und die Übersetzungs-Hooks/-Komponenten verwenden. vue-i18n ist eine Standardwahl für Vue-Entwickler im Jahr 2026 und bietet robuste Funktionen für Sprachwechsel, Pluralisierung und Formatierung.

---

Einführung

Der Aufbau einer globalen Anwendung mit Vue erfordert eine solide Strategie für Internationalisierung. In diesem Guide gehen wir durch, wie man vue-i18n von Grund auf einrichtet.

Warum vue-i18n?

• Popularität: Weit verbreitet im Vue-Ökosystem.
• Funktionen: Unterstützt Plurale, Kontext und Interpolation.
• Community: Umfangreiche Dokumentation und Beispiele.

---

Schritt 1: Installation

Füge zuerst die Abhängigkeit zu deinem Projekt hinzu:

TerminalCopy
npm install vue-i18n

Schritt 2: Konfiguration

Konfiguriere das Plugin im Stammverzeichnis deiner Anwendung.

JavaScriptCopy
1import { createApp } from 'vue'
2import { createI18n } from 'vue-i18n'
3import App from './App.vue'
4
5const i18n = createI18n({
6  locale: 'en',
7  fallbackLocale: 'en',
8  messages: {
9    en: {
10      message: {
11        hello: 'hello world'
12      }
13    },
14    de: {
15      message: {
16        hello: 'hallo welt'
17      }
18    }
19  }
20})
21
22const app = createApp(App)
23app.use(i18n)
24app.mount('#app')

Schritt 3: Verwendung

So übersetzt du einen String in einer Komponente:

HTMLCopy
<template>
  <h1>{{ $t('message.hello') }}</h1>
</template>

---

Verwaltung von Übersetzungen mit IntlPull

Wenn deine App wächst, wird die Verwaltung von JSON-Dateien schwierig. IntlPull automatisiert diesen Workflow:

1. Extrahieren: Ziehe Schlüssel aus deinem Vue-Code.
2. Übersetzen: Verwende KI, um in 50+ Sprachen zu übersetzen.
3. Synchronisieren: Pushe Updates zurück in dein Repo.

TerminalCopy
npx @intlpullhq/cli push

---

Fazit

Die Implementierung von Internationalisierung in Vue ist mit vue-i18n einfach.

• Installiere das Paket
• Konfiguriere das Plugin
• Verwende $t in deinen Templates
• Verwende IntlPull, um deine Übersetzungen effizient zu verwalten.