Wie Sie Ihre Vue.js / Nuxt Website in Mehrere Sprachen Übersetzen (Guide 2026)

Vue.js und Nuxt betreiben Millionen von Websites und Webanwendungen weltweit. Aber wenn es um mehrsprachige Unterstützung geht, war das Vue-Ökosystem historisch fragmentierter als das von React — Entwickler mussten Lösungen aus mehreren Bibliotheken und manueller Konfiguration zusammenbasteln.

Im Jahr 2026 haben Sie drei solide Wege: vue-i18n (die offizielle Vue-Internationalisierungsbibliothek), @nuxtjs/i18n (das Nuxt-Modul, das vue-i18n mit Routing und SEO erweitert) und LingoJS (der Ein-Script-Ansatz, der mit jedem Vue- oder Nuxt-Projekt funktioniert, ohne Ihren Code zu verändern).

Dieser Leitfaden behandelt alle drei Ansätze — mit echten Codebeispielen, Einrichtungszeiten und einem klaren Rahmen für die richtige Wahl.

Warum Vue.js-Mehrsprachigkeit 2026 wichtig ist

Vue.js ist das zweitbeliebteste Frontend-Framework weltweit, und Nuxt ist das beliebteste Vue-Meta-Framework. Unternehmen wie Nintendo, GitLab, Adobe und BMW setzen Vue in der Produktion ein. Wenn Ihre Vue-App nur eine Sprache spricht, sind Sie für einen erheblichen Teil Ihrer potenziellen Zielgruppe unsichtbar.

Die Zahlen sind eindeutig: 75% der Nutzer kaufen lieber auf Websites in ihrer Muttersprache, und lokalisierte Seiten ranken konsistent höher in regionalen Suchmaschinen. Für Nuxt-Websites — die auf SSR und statischer Generierung für SEO setzen — erschließt die Übersetzung Ihrer Inhalte organischen Traffic in jedem Zielmarkt.

Ansatz 1: vue-i18n — Die Offizielle Bibliothek

vue-i18n ist die Standard-Internationalisierungsbibliothek für Vue.js, gepflegt vom Vue-Kernteam. Sie integriert sich mit der Composition API von Vue 3 und bietet reaktive Übersetzung, Pluralisierung, Datumsformatierung und Locale-Wechsel.

Einrichtung

npm install vue-i18n@10

// i18n.ts
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import fr from './locales/fr.json';
 
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, fr }
});
 
export default i18n;

// 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');

In Ihren Komponenten verwenden Sie die $t()-Funktion:

<template>
  <h1>{{ $t('hero.title') }}</h1>
  <p>{{ $t('hero.subtitle') }}</p>
</template>

Was gut funktioniert

vue-i18n ist schnell, gut dokumentiert und eng mit dem Reaktivitätssystem von Vue integriert. Lazy-Loading von Locale-Dateien wird standardmäßig unterstützt. Die Composition-API-Unterstützung (useI18n()) ist sauber und idiomatisch.

Was kompliziert wird

Jeder zu übersetzende String muss in $t() oder t() in Ihren Templates verpackt werden. Das bedeutet, jede Komponente anzufassen, die Text rendert. Übersetzungsdateien sind JSON, die Sie manuell pflegen. Eine neue Sprache hinzuzufügen bedeutet, die gesamte englische JSON-Datei zu kopieren und jeden Eintrag zu übersetzen. Für eine mittelgroße Vue-App mit über 500 übersetzbaren Strings in 20 Komponenten bedeutet das Tage an anfänglicher Einrichtung und laufender Wartung.

SEO ist ebenfalls manuell — Sie müssen Hreflang-Tags, lokalisierte Metadaten und eine mehrsprachige Sitemap selbst oder über ein Nuxt-Modul konfigurieren.

Ansatz 2: @nuxtjs/i18n — Das Nuxt-Modul

Wenn Sie Nuxt 3 verwenden, umschließt das @nuxtjs/i18n-Modul vue-i18n und fügt automatische Routengenerierung, Locale-Erkennung, SEO-Tags und URL-Strategien hinzu. Es ist die vollständigste i18n-Lösung für Nuxt-Projekte.

Einrichtung

npx nuxi module add i18n

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'fr', 'de', 'es', 'it'],
    defaultLocale: 'en',
    strategy: 'prefix',
    vueI18n: './i18n.config.ts'
  }
});

Das Modul generiert automatisch Routen pro Locale (/fr/about, /de/about), injiziert Hreflang-Tags und bietet Composables wie useLocalePath() und useSwitchLocalePath().

Was gut funktioniert

Die Routengenerierung und Hreflang-Automatisierung sparen Stunden manueller Konfiguration. Die strategy-Option unterstützt Prefix (/fr/about), Prefix außer Default (/about + /fr/about) und keinen Prefix. SEO-Metadaten pro Locale werden über useSeoMeta() in Kombination mit dem i18n-Modul verwaltet.

Was noch Arbeit erfordert

Sie schreiben immer noch jede Übersetzung manuell in JSON-Dateien. Das Modul verwaltet die Routing-Ebene, übersetzt aber nicht Ihre Inhalte — es stellt nur die richtige Datei für jede Locale bereit. Für eine Nuxt-Site mit Blog, Dokumentation oder benutzergenerierten Inhalten wächst die Wartungslast linear.

Ansatz 3: LingoJS — Ein Script, Null Code-Änderungen

LingoJS funktioniert mit jedem Vue- oder Nuxt-Projekt ohne Code-Änderungen. Sie fügen ein Script-Tag zu Ihrer HTML-Vorlage hinzu (oder verwenden Nuxts useHead-Composable), und LingoJS erkennt, übersetzt und liefert Ihre Inhalte automatisch in jeder aktivierten Sprache aus.

Einrichtung für Vue

<!-- index.html -->
<script
  src="https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js"
  data-api-key="YOUR_API_KEY"
  async
></script>

Einrichtung für Nuxt

<!-- app.vue -->
<script setup>
useHead({
  script: [
    {
      src: 'https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js',
      async: true,
      'data-api-key': 'YOUR_API_KEY'
    }
  ]
});
</script>

Das ist alles. LingoJS verwaltet alles automatisch — Texterkennung, kontextuelle KI-Übersetzung, CDN-Bereitstellung in ~26ms, Hreflang-Tags, lokalisierte Metadaten, schema.org und Sprachauswahl-Widget.

Vergleich: Vue-i18n vs Nuxt-i18n vs LingoJS

Performance: Welche Auswirkung hat die Übersetzung?

vue-i18n mit einer einzelnen Locale geladen fügt etwa 12KB zu Ihrem Vue-Bundle hinzu. Jede zusätzlich geladene Locale fügt die Größe ihrer JSON-Datei hinzu. Für eine Nuxt-Site mit SSR muss der Server diese Dateien bei jeder Anfrage laden und verarbeiten.

LingoJS lädt asynchron vom globalen CDN von jsDelivr. Das Script blockiert das Rendering nicht, und Übersetzungen werden am Edge zwischengespeichert. Ergebnis: Die Core Web Vitals Ihrer Vue-App bleiben unverändert.

SEO für mehrsprachige Vue/Nuxt-Websites

Nuxts SSR und statische Generierung bieten bereits eine starke SEO-Grundlage. Aber das Hinzufügen von Sprachen vervielfacht die Komplexität:

• Hreflang-Tags müssen auf jeder Seitenvariante vorhanden, reziprok und auf die richtige Locale-URL zeigend sein
• Canonical-URLs müssen die korrekte Sprachversion referenzieren
• Meta-Tags (Title, Description, og:title, og:description) müssen pro Locale übersetzt werden
• Strukturierte Daten (schema.org) sollten lokalisiert werden
• Mehrsprachige Sitemaps helfen Google, jede Sprachversion zu entdecken

@nuxtjs/i18n verwaltet die Hreflang-Generierung automatisch im prefix-Modus. vue-i18n allein macht nichts davon. LingoJS verwaltet alles automatisch.

Wann Sie welchen Ansatz verwenden sollten

Verwenden Sie vue-i18n, wenn: Sie eine reine Vue-SPA (ohne Nuxt) entwickeln, string-genaue Kontrolle benötigen, eine begrenzte Anzahl zu übersetzender Strings haben oder bereits ein internes Übersetzungsteam JSON-Dateien produziert.

Verwenden Sie @nuxtjs/i18n, wenn: Sie auf Nuxt 3 sind, automatische Routengenerierung und grundlegende SEO wünschen und sich mit der Pflege von Übersetzungsdateien wohlfühlen.

Verwenden Sie LingoJS, wenn: Sie möchten, dass Ihre Vue- oder Nuxt-Site heute mehrsprachig ist, ohne Komponenten zu ändern, Übersetzungsdateien zu verwalten oder SEO zu konfigurieren. Sie schätzen Entwicklungsgeschwindigkeit oder sind ein kleines Team.

Erste Schritte

Um den Zero-Code-Ansatz zu testen, installieren Sie LingoJS in zwei Minuten:

1. Erstellen Sie ein kostenloses Konto auf lingojs.com
2. Holen Sie sich Ihren API-Schlüssel aus dem Dashboard
3. Fügen Sie das Script-Tag zu Ihrer HTML-Vorlage oder app.vue hinzu
4. Wählen Sie Ihre Zielsprachen im Dashboard
5. Deployen — Ihre Website ist jetzt mehrsprachig

Starten Sie Ihre kostenlose 30-Tage-Testversion →