Funktioniert Lingvit mit Nuxt 3 und Nuxt 4?

Ja. Lingvit ist Framework-agnostisch und arbeitet auf DOM-Ebene. Sowohl Nuxt 3 als auch Nuxt 4 erzeugen Standard-HTML, das das Widget über einen MutationObserver beobachtet. Fügen Sie das Script über app.head.script in nuxt.config.ts mit tagPosition: 'bodyClose' hinzu, und es funktioniert sofort.

Funktioniert Lingvit mit Nuxt SSR?

Ja. Nuxts serverseitig gerendertes HTML wird an den Browser gesendet, dann hydratisiert Vue es. Lingvit initialisiert sich, nachdem die Hydration abgeschlossen ist, und erfasst alle Textknoten aus dem gerenderten DOM — egal ob sie vom Server oder von clientseitigen Zustandsänderungen stammen.

Beeinträchtigt Lingvit die Vue-Hydration?

Nein. Das Lingvit-Script lädt asynchron, nachdem das DOM bereit ist, und wartet, bis sich die Seite stabilisiert hat, bevor es übersetzt. Es berührt nicht das virtuelle DOM, ändert nicht den Komponentenzustand und löst keine Vue-Reaktivität aus — es ändert nur gerenderte Textknoten.

Kann ich @nuxtjs/i18n zusammen mit Lingvit nutzen?

Ja. Wenn Sie bereits @nuxtjs/i18n für manchen Content nutzen und automatische Übersetzung für den Rest möchten, können beide koexistieren. Lingvit übersetzt jeden Textknoten, der zur Renderzeit im DOM vorhanden ist, einschließlich bereits von nuxt-i18n übersetzter Strings.

Nuxti18nLeitfaden

Nuxt.js-Internationalisierung: i18n vs. automatische Übersetzung (2026)

27. Juni 2026·9 Min. Lesezeit

Nuxt.js hat zwei glaubwürdige Wege zu einer mehrsprachigen Website: das offizielle @nuxtjs/i18n-Modul, das Vue Router, Locale-Dateien und Slug-Routing miteinander verdrahtet, und DOM-basierte automatische Übersetzung über einen einzigen Script-Tag. Beides funktioniert — aber sie lösen unterschiedliche Probleme und passen zu sehr unterschiedlichen Teams. Hier ist der ehrliche Kompromiss.

Was @nuxtjs/i18n tatsächlich leistet

@nuxtjs/i18n (nuxt-i18n) ist das offizielle Nuxt-Modul für Internationalisierung. Es kapselt vue-i18n und integriert sich eng in Nuxts dateibasiertes Routing und Vue Router. Das bekommen Sie damit:

Locale-präfixiertes URL-Routing — /fr/about, /de/pricing — automatisch über die Nuxt-Routing-Ebene abgewickelt.
Browser-Spracherkennung über den Accept-Language-Header (serverseitig) oder navigator.language (clientseitig).
Automatisch generierte hreflang-Tags für jede Sprachversion einer Seite — wichtig für SEO.
Das $t()-Composable und den useI18n()-Hook zum Übersetzen von Strings in Templates und <script setup>.

Was es nicht leistet: irgendeinen Ihrer Inhalte übersetzen. Jeder String in jeder Locale-Datei muss von einem Menschen geschrieben (oder manuell durch einen Übersetzungsdienst geleitet) werden. Das Modul verwaltet Routing und Lookup; das Eintragen der eigentlichen Übersetzungen liegt in Ihrer Verantwortung.

@nuxtjs/i18n einrichten: was tatsächlich nötig ist

Eine minimale nuxt-i18n-Einrichtung für drei Sprachen erfordert diese Bausteine:

1Das Modul installieren und in nuxt.config.ts unter modules registrieren.
2Locales, die Standard-Locale und die Lazy-Loading-Strategie im i18n-Konfigurationsblock deklarieren.
3Locale-spezifische JSON-Dateien erstellen: locales/en.json, locales/fr.json, locales/de.json — eine pro unterstützter Sprache, aktualisiert bei jedem neuen UI-String.
4Jeden hartcodierten String in jeder Komponente durch einen $t('key')- oder t('key')-Aufruf ersetzen — jede .vue-Datei im Projekt anfassen.
5Eine Locale-Switcher-Komponente zur Navigation hinzufügen; Routing-Logik für individuelle Slug-Seiten aktualisieren (z. B. wird ein Blogbeitrag unter /blog/[slug] zu /fr/blog/[slug] mit Nuxt-i18n-Routing).

Ein minimaler nuxt.config.ts-i18n-Block:

export default defineNuxtConfig({ modules: ["@nuxtjs/i18n"], i18n: { locales: [ { code: "en", file: "en.json" }, { code: "fr", file: "fr.json" }, { code: "de", file: "de.json" }, ], defaultLocale: "en", lazy: true, langDir: "locales/", strategy: "prefix_except_default", }, })

Und eine entsprechende locales/en.json:

{ "nav": { "home": "Home", "pricing": "Pricing", "docs": "Documentation" }, "hero": { "headline": "Translate your Nuxt app", "cta": "Get started free" } }

Jeder Schlüssel muss in fr.json und de.json dupliziert und übersetzt werden — und für immer synchron gehalten werden, während sich das Produkt weiterentwickelt.

Die sich summierenden Wartungskosten

Der Aufwand pro String ist isoliert betrachtet klein. Die Gesamtkosten über ein reales Produkt hinweg summieren sich schnell:

Kopplung von Content und Code

Jeder neue UI-String erfordert einen Schlüssel in der Quell-Locale-Datei und einen passenden Eintrag in jeder Ziel-Locale-Datei. Ein am Montag ausgeliefertes Feature bedeutet, dass die französische und deutsche Datei aktualisiert werden müssen, bevor französische und deutsche Nutzer etwas anderes als einen Schlüssel-Fallback sehen.

Komponenten-Refactoring betrifft jede Datei

nuxt-i18n zu einem bestehenden Projekt hinzuzufügen bedeutet, jede .vue-Datei anzufassen, die Text rendert — Strings in $t() zu verpacken, Werte in Locale-Dateien zu extrahieren und zu prüfen, dass nichts übersehen wurde. Bei einem Projekt mit über 50 Komponenten ist das ein mehrtägiges Refactoring.

Locale-Datei-Drift

Ohne Tooling wie @nuxtjs/i18n's Erkennung fehlender Schlüssel oder ein Drittanbieter-Script driften Locale-Dateien stillschweigend auseinander. Die englische Datei gewinnt Schlüssel, die der französischen Datei fehlen, und das Fallback-Rendering zeigt französischen Nutzern still und leise englischen Text.

RTL erfordert separate Layout-Arbeit

nuxt-i18n übersetzt Strings; es kippt nicht die Layoutrichtung. Arabisch oder Hebräisch zu unterstützen bedeutet, dir="rtl" auf dem Root-Element zu setzen, jede Komponente auf physische CSS-Eigenschaften zu prüfen und das gesamte Layout im RTL-Modus zu testen — ein separater Engineering-Aufwand.

Wann @nuxtjs/i18n die richtige Wahl ist

Es gibt spezifische Situationen, in denen der volle Modul-Stack eindeutig gerechtfertigt ist:

✓

SEO-kritische Content-Websites mit sprachspezifischen URLs

Wenn jede Sprachversion eine eigenständige, indexierbare URL mit eigener Canonical und eigenem hreflang sein muss — und Sie die Entwicklerressourcen haben, es zu bauen und zu pflegen — liefert nuxt-i18n genau das.

✓

Open-Source-Apps mit Community-Übersetzungen

Wenn Übersetzungen von der Community über GitHub-Pull-Requests beigetragen werden, sind Locale-JSON-Dateien die richtige Schnittstelle für Mitwirkende. Crowdin, Weblate und ähnliche Plattformen integrieren sich direkt mit diesem Format.

✓

Regulierter Content mit Compliance-Anforderungen

Rechtliche, medizinische oder finanzielle Anwendungen, bei denen jeder String explizit geprüft und freigegeben werden muss, bevor er ausgeliefert wird. nuxt-i18n macht jeden String zu einem auditierbaren, eigenständigen Artefakt mit Versionshistorie.

✓

Offlinefähige PWAs

Nuxt-Apps, die offline funktionieren müssen, benötigen alle Locale-Strings zur Build-Zeit gebündelt. nuxt-i18n-Locale-JSON-Dateien sind im Build enthalten; DOM-basierte Übersetzung kann ohne Netzwerkverbindung nicht funktionieren.

Lingvit zu einer Nuxt-3-App hinzufügen

Die Alternative ist ein Script-Tag — keine Modul-Installation, keine Locale-Dateien, keine Komponentenänderungen. Für Nuxt 3 fügen Sie das Script über die app.head-Eigenschaft in nuxt.config.ts hinzu:

// nuxt.config.ts export default defineNuxtConfig({ app: { head: { script: [ { src: "https://cdn.lingvit.com/widget.bundle.js?v=1", "data-project-id": "YOUR_PROJECT_ID", async: true, tagPosition: "bodyClose", }, ], }, }, })

Alternativ nutzen Sie das useHead-Composable in Ihrer Root-app.vue, wenn Sie Kontrolle auf Komponentenebene bevorzugen:

<script setup lang="ts"> useHead({ script: [ { src: "https://cdn.lingvit.com/widget.bundle.js?v=1", "data-project-id": "YOUR_PROJECT_ID", async: true, tagPosition: "bodyClose", }, ], }) </script>

Das ist die vollständige Integration. Lingvits Widget nutzt einen MutationObserver, um das DOM zu beobachten, nachdem Nuxt gerendert und hydratisiert hat. Es übernimmt:

Serverseitig gerendertes HTML aus Nuxts SSR-Engine — sofort übersetzt, sobald die Hydration abgeschlossen ist.
Reaktive Vue-Aktualisierungen — Content, der durch v-if sichtbar wird, durch v-for gerendert oder über asynchrones Daten-Fetching geladen wird, wird übersetzt, sobald neue Knoten im DOM erscheinen.
Vue-Router-Navigation — Nuxts clientseitige Routenübergänge lösen den Observer für den neu gerenderten Seiteninhalt aus.
RTL-Layout — document.documentElement.dir wird automatisch gesetzt, wenn zu Arabisch, Hebräisch oder einer anderen RTL-Sprache gewechselt wird.

Einrichtungsvergleich

@nuxtjs/i18n-Einrichtung

1.@nuxtjs/i18n installieren und in nuxt.config.ts registrieren
2.Locales, Strategie und Lazy-Loading im i18n-Block konfigurieren
3.locales/en.json, fr.json usw. erstellen
4.Jeden Template-String mit $t() in allen .vue-Dateien verpacken
5.Locale-Switcher-UI-Komponente hinzufügen
6.Übersetzungsdateien pro Sprache ausfüllen

Lingvit-Einrichtung

1.Einen script-Eintrag zu nuxt.config.ts app.head hinzufügen
2.Zielsprachen im Lingvit-Dashboard auswählen

Wann automatische Übersetzung ausreicht

Für viele Nuxt-Projekte ist DOM-basierte Übersetzung kein Kompromiss — sie ist die richtige Engineering-Entscheidung:

Marketing- und Content-Websites

Eine Nuxt-Marketing-Website oder ein Blog hat keine komplexe Pluralisierung, keine Offline-Anforderung und ändert Texte häufig. Automatische Übersetzung verarbeitet jeden neuen Absatz beim ersten Rendering ohne Entwicklereingriff.

SaaS-Dashboards, die schnell Sprachen hinzufügen

Internationale Nutzer bedeuten internationalen Umsatz. Über einen Script-Tag auf Französisch live zu gehen dauert einen Nachmittag. nuxt-i18n nachträglich in ein bestehendes SaaS-Dashboard einzubauen dauert Wochen und betrifft jede Komponente.

Schnelle Produktiteration

Wenn sich UI-Texte wöchentlich ändern, wird die Pflege von Locale-Dateien zur Bremse für die Geschwindigkeit. Jede Textaktualisierung erfordert, jede Locale-Datei anzufassen, bevor Übersetzer sie prüfen können. Automatische Übersetzung verarbeitet neue Strings beim ersten Rendering ohne Entwicklereingriff.

Bestehende Nuxt-Apps ohne i18n

nuxt-i18n zu einem Projekt hinzuzufügen, das nicht damit gebaut wurde, bedeutet, jede Komponente anzufassen, die Text rendert. Ein DOM-basiertes Widget erfordert null Komponentenänderungen — Script-Tag hinzufügen, Sprachen auswählen, fertig.

Was automatische Übersetzung nicht abdeckt

DOM-basierte Übersetzung hat echte Grenzen. Verstehen Sie diese, bevor Sie sich entscheiden:

Nur serverseitige Strings

Strings in serverseitigen E-Mail-Vorlagen, API-Antworttexten oder Nuxt-Server-Routen werden nie in ein Browser-DOM gerendert und daher nicht übersetzt.

Komplexe ICU-Pluralisierung

Anwendungen, die für Sprachen mit komplexen Pluralregeln (Arabisch: sechs Formen, Polnisch: vier Formen) bei dynamisch gezählten Werten grammatikalisch korrekte Pluralisierung benötigen, erfordern Unterstützung für das ICU-Message-Format — ein Bibliotheks-Feature, keine DOM-Ebene-Übersetzung.

Offline-/PWA-Anforderung

Wenn Ihre Nuxt-App vollständig offline funktionieren muss, ist automatische Übersetzung keine Option — sie erfordert einen Netzwerkaufruf, um Übersetzungen abzurufen. Nutzen Sie zur Build-Zeit gebündelte Locale-JSON-Dateien.

Häufig gestellte Fragen

Funktioniert Lingvit mit Nuxt 3 und Nuxt 4?: Ja. Lingvit ist Framework-agnostisch und arbeitet auf DOM-Ebene. Sowohl Nuxt 3 als auch Nuxt 4 erzeugen Standard-HTML, das das Widget über einen MutationObserver beobachtet. Fügen Sie das Script über app.head.script in nuxt.config.ts mit tagPosition: 'bodyClose' hinzu, und es funktioniert sofort.
Funktioniert Lingvit mit Nuxt SSR?: Ja. Nuxts serverseitig gerendertes HTML wird an den Browser gesendet, dann hydratisiert Vue es. Lingvit initialisiert sich, nachdem die Hydration abgeschlossen ist, und erfasst alle Textknoten aus dem gerenderten DOM — egal ob sie vom Server oder von clientseitigen Zustandsänderungen stammen.
Beeinträchtigt Lingvit die Vue-Hydration?: Nein. Das Lingvit-Script lädt asynchron, nachdem das DOM bereit ist, und wartet, bis sich die Seite stabilisiert hat, bevor es übersetzt. Es berührt nicht das virtuelle DOM, ändert nicht den Komponentenzustand und löst keine Vue-Reaktivität aus — es ändert nur gerenderte Textknoten.
Kann ich @nuxtjs/i18n zusammen mit Lingvit nutzen?: Ja. Wenn Sie bereits @nuxtjs/i18n für manchen Content nutzen und automatische Übersetzung für den Rest möchten, können beide koexistieren. Lingvit übersetzt jeden Textknoten, der zur Renderzeit im DOM vorhanden ist, einschließlich bereits von nuxt-i18n übersetzter Strings.

Weitere Anleitungen

Fügen Sie Ihrer Nuxt-App Sprachen hinzu

Funktioniert mit Nuxt 3 und Nuxt 4, SSR und statisch. Ein Konfigurationseintrag, keine Komponentenänderungen.

Jetzt loslegen Vue-i18n-Vergleich →