Intlayer

--- createdAt: 2024-08-11 updatedAt: 2025-08-23 title: vue-i18n vs Intlayer description: Vergleich von vue-i18n mit Intlayer für Internationalisierung (i18n) in Vue/Nuxt-Apps keywords: - vue-i18n - Intlayer - Internationalisierung - i18n - Blog - Vue - Nuxt - JavaScript slugs: - blog - vue-i18n-vs-intlayer --- # vue-i18n VS Intlayer | Vue Internationalisierung (i18n) Dieser Leitfaden vergleicht zwei beliebte i18n-Optionen für **Vue 3** (und **Nuxt**): **vue-i18n** und **Intlayer**. Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten: 1. **Architektur & Inhaltsorganisation** 2. **TypeScript & Sicherheit** 3. **Umgang mit fehlenden Übersetzungen** 4. **Routing- & URL-Strategie** 5. **Performance & Ladeverhalten** 6. **Entwicklererfahrung (DX), Tools & Wartung** 7. **SEO & Skalierbarkeit für große Projekte** > **Kurzfassung**: Beide können Vue-Apps lokalisieren. Wenn Sie **komponentenbezogenen Inhalt**, **strenge TypeScript-Typen**, **Build-Zeit-Prüfungen für fehlende Schlüssel**, **tree-shakbare Wörterbücher** und **integrierte Router-/SEO-Hilfen** sowie **Visuellen Editor & KI-Übersetzungen** wünschen, ist **Intlayer** die umfassendere, modernere Wahl. --- ## Übergeordnete Positionierung - **vue-i18n** - Die de-facto i18n-Bibliothek für Vue. Flexible Nachrichtenformatierung (ICU-Stil), SFC-`<i18n>`-Blöcke für lokale Nachrichten und ein großes Ökosystem. Sicherheit und groß angelegte Wartung liegen größtenteils bei Ihnen. - **Intlayer** - Komponentenorientiertes Inhaltsmodell für Vue/Vite/Nuxt mit **strenger TS-Typisierung**, **Build-Zeit-Prüfungen**, **Tree-Shaking**, **Router- & SEO-Hilfen**, optionalem **Visuellen Editor/CMS** und **KI-unterstützten Übersetzungen**. --- ## Gegenüberstellung der Funktionen (Vue-fokussiert) | Funktion | **Intlayer** | **vue-i18n** | | -------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | **Übersetzungen nahe bei den Komponenten** | ✅ Ja, Inhalt pro Komponente zusammengefasst (z.B. `MyComp.content.ts`) | ✅ Ja, über SFC-`<i18n>`-Blöcke (optional) | | **TypeScript-Integration** | ✅ Fortgeschritten, automatisch generierte **strenge** Typen & Schlüssel-Autovervollständigung | ✅ Gute Typisierung; **strenge Schlüsselsicherheit erfordert zusätzliche Einrichtung/Disziplinen** | | **Erkennung fehlender Übersetzungen** | ✅ **Build-Zeit** Warnungen/Fehler und TS-Anzeige | ⚠️ Laufzeit-Fallbacks/Warnungen | | **Reicher Inhalt (Komponenten/Markdown)** | ✅ Direkte Unterstützung für reichhaltige Knoten und Markdown-Inhaltsdateien | ⚠️ Eingeschränkt (Komponenten über `<i18n-t>`, Markdown über externe Plugins) | | **KI-gestützte Übersetzung** | ✅ Eingebaute Workflows mit eigenen KI-Anbieterschlüsseln | ❌ Nicht eingebaut | | **Visueller Editor / CMS** | ✅ Kostenloser visueller Editor & optionales CMS | ❌ Nicht eingebaut (externe Plattformen verwenden) | | **Lokalisierte Routenführung** | ✅ Helfer für Vue Router/Nuxt zur Generierung lokalisierter Pfade, URLs und `hreflang` | ⚠️ Nicht im Kern enthalten (verwenden Sie Nuxt i18n oder eine benutzerdefinierte Vue Router-Konfiguration) | | **Dynamische Routen-Generierung** | ✅ Ja | ❌ Nicht bereitgestellt (wird von Nuxt i18n bereitgestellt) | | **Pluralisierung & Formatierung** | ✅ Aufzählungsmuster; Intl-basierte Formatierer | ✅ ICU-Stil Nachrichten; Intl Formatierer | | **Inhaltsformate** | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML in Arbeit) | ✅ `.json`, `.js` (plus SFC `<i18n>`-Blöcke) | | **ICU-Unterstützung** | ⚠️ In Arbeit | ✅ Ja | | **SEO-Helfer (Sitemap, Robots, Metadaten)** | ✅ Eingebaute Helfer (framework-unabhängig) | ❌ Nicht im Kern enthalten (Nuxt i18n/Gemeinschaft) | | **SSR/SSG** | ✅ Funktioniert mit Vue SSR und Nuxt; blockiert kein statisches Rendering | ✅ Funktioniert mit Vue SSR/Nuxt | | **Tree-shaking (nur genutzte Inhalte ausliefern)** | ✅ Pro Komponente zur Build-Zeit | ⚠️ Teilweise; erfordert manuelles Code-Splitting/async Nachrichten | | **Lazy Loading** | ✅ Pro Locale / pro Wörterbuch | ✅ Async Locale-Nachrichten werden unterstützt | | **Unbenutzte Inhalte entfernen** | ✅ Ja (zur Build-Zeit) | ❌ Nicht integriert | | **Wartbarkeit bei großen Projekten** | ✅ Fördert modulare, designsystemfreundliche Struktur | ✅ Möglich, erfordert jedoch strenge Datei-/Namespace-Disziplin | | **Ökosystem / Community** | ⚠️ Kleiner, aber schnell wachsend | ✅ Groß und ausgereift im Vue-Ökosystem | --- ## Tiefgehender Vergleich ### 1) Architektur & Skalierbarkeit - **vue-i18n**: Übliche Setups verwenden **zentralisierte Kataloge** pro Locale (optional aufgeteilt in Dateien/Namespaces). SFC-`<i18n>`-Blöcke erlauben lokale Nachrichten, aber Teams greifen oft auf gemeinsame Kataloge zurück, wenn Projekte wachsen. - **Intlayer**: Fördert **pro-Komponenten-Wörterbücher**, die neben der jeweiligen Komponente gespeichert werden. Dies reduziert Konflikte zwischen Teams, hält Inhalte auffindbar und begrenzt natürlich Drift/ungenutzte Schlüssel. **Warum das wichtig ist:** In großen Vue-Anwendungen oder Designsystemen skaliert **modularer Inhalt** besser als monolithische Kataloge. --- ### 2) TypeScript & Sicherheit - **vue-i18n**: Gute TS-Unterstützung; **strikte Schlüsseltypisierung** erfordert typischerweise benutzerdefinierte Schemata/Generics und sorgfältige Konventionen. - **Intlayer**: **Erzeugt strenge Typen** aus deinen Inhalten, bietet **IDE-Autovervollständigung** und **Kompilierzeit-Fehler** bei Tippfehlern oder fehlenden Schlüsseln. **Warum das wichtig ist:** Starke Typisierung erkennt Probleme **vor** der Laufzeit. --- ### 3) Umgang mit fehlenden Übersetzungen - **vue-i18n**: **Laufzeit**-Warnungen/Fallbacks (z.B. Rückfall auf Locale oder Schlüssel). - **Intlayer**: **Buildzeit**-Erkennung mit Warnungen/Fehlern über alle Locales und Schlüssel hinweg. **Warum das wichtig ist:** Durchsetzung zur Buildzeit hält die Produktions-UI sauber und konsistent. --- ### 4) Routing- & URL-Strategie (Vue Router/Nuxt) - **Beide** können mit lokalisierten Routen arbeiten. - **Intlayer** bietet Hilfsmittel, um **lokalisierte Pfade zu generieren**, **Locale-Präfixe zu verwalten** und **`<link rel="alternate" hreflang>`** für SEO auszugeben. In Kombination mit Nuxt ergänzt es das Routing des Frameworks. **Warum das wichtig ist:** Weniger individuelle Verbindungs-Schichten und **saubereres SEO** über verschiedene Sprachen hinweg. --- ### 5) Leistung & Ladeverhalten - **vue-i18n**: Unterstützt asynchrone Locale-Nachrichten; das Vermeiden von Über-Bundling liegt bei dir (Kataloge sorgfältig aufteilen). - **Intlayer**: **Tree-shaking** zur Build-Zeit und **Lazy-Loading pro Wörterbuch/Locale**. Unbenutzte Inhalte werden nicht ausgeliefert. **Warum das wichtig ist:** Kleinere Bundles und schnellerer Start für mehrsprachige Vue-Anwendungen. --- ### 6) Entwicklererfahrung & Werkzeuge - **vue-i18n**: Ausgereifte Dokumentation und Community; in der Regel verlassen Sie sich auf **externe Lokalisierungsplattformen** für redaktionelle Workflows. - **Intlayer**: Bietet einen **kostenlosen visuellen Editor**, ein optionales **CMS** (Git-freundlich oder externalisiert), eine **VSCode-Erweiterung**, **CLI/CI**-Werkzeuge und **KI-unterstützte Übersetzungen** mit Ihren eigenen Anbieter-Schlüsseln. **Warum das wichtig ist:** Geringere Betriebskosten und eine kürzere Entwicklungs-Content-Schleife. --- ### 7) SEO, SSR & SSG - **Beide** funktionieren mit Vue SSR und Nuxt. - **Intlayer**: Fügt **SEO-Hilfsmittel** hinzu (Sitemaps/Metadaten/`hreflang`), die frameworkunabhängig sind und gut mit Vue/Nuxt-Builds zusammenarbeiten. **Warum das wichtig ist:** Internationale SEO ohne maßgeschneiderte Verkabelung. --- ## Warum Intlayer? (Problem & Ansatz) Die meisten i18n-Stacks (einschließlich **vue-i18n**) starten mit **zentralisierten Katalogen**: ```bash . ├── locales │ ├── en.json │ ├── es.json │ └── fr.json └── src └── components └── MyComponent.vue ``` Oder mit pro-Locale-Ordnern: ```bash . ├── locales │ ├── en │ │ ├── footer.json │ │ └── navbar.json │ ├── fr │ │ ├── footer.json │ │ └── navbar.json │ └── es │ ├── footer.json │ └── navbar.json └── src └── components └── MyComponent.vue ``` Dies verlangsamt die Entwicklung oft, wenn Anwendungen wachsen: 1. **Für eine neue Komponente** erstellen/bearbeiten Sie entfernte Kataloge, verbinden Namespaces und übersetzen (oft durch manuelles Kopieren/Einfügen aus KI-Tools). 2. **Beim Ändern von Komponenten** suchen Sie gemeinsam genutzte Schlüssel, übersetzen, halten die Lokalisierungen synchron, entfernen veraltete Schlüssel und gleichen JSON-Strukturen an. **Intlayer** grenzt Inhalte **pro Komponente** ab und hält sie **neben dem Code**, so wie wir es bereits mit CSS, Stories, Tests und Dokumentationen tun: ```bash . └── components └── MyComponent ├── MyComponent.content.ts └── MyComponent.vue ``` **Inhaltsdeklaration** (pro Komponente): ```ts fileName="./components/MyComponent/MyComponent.content.ts" import { t, type Dictionary } from "intlayer"; const componentExampleContent = { key: "component-example", content: { greeting: t({ en: "Hello World", es: "Hola Mundo", fr: "Bonjour le monde", }), }, } satisfies Dictionary; export default componentExampleContent; ``` **Verwendung in Vue** (Composition API): ```vue fileName="./components/MyComponent/MyComponent.vue" <script setup lang="ts"> import { useIntlayer } from "vue-intlayer"; // Vue-Integration const { greeting } = useIntlayer("component-example"); </script> <template> <span>{{ greeting }}</span> </template> ``` Dieser Ansatz: - **Beschleunigt die Entwicklung** (einmal deklarieren; IDE/AI vervollständigt automatisch). - **Bereinigt den Codebestand** (1 Komponente = 1 Wörterbuch). - **Erleichtert Duplikation/Migration** (kopiere eine Komponente und deren Inhalt zusammen). - **Vermeidet tote Schlüssel** (ungenutzte Komponenten importieren keinen Inhalt). - **Optimiert das Laden** (lazy-geladene Komponenten bringen ihren Inhalt mit). --- ## Zusätzliche Funktionen von Intlayer (Vue-relevant) - **Framework-übergreifende Unterstützung**: Funktioniert mit Vue, Nuxt, Vite, React, Express und mehr. - **JavaScript-gesteuertes Content-Management**: Deklaration im Code mit voller Flexibilität. - **Pro-Locale-Deklarationsdatei**: Säen Sie alle Sprachen und lassen Sie die Tools den Rest generieren. - **Typensicheres Umfeld**: Starke TS-Konfiguration mit Autovervollständigung. - **Vereinfachte Inhaltsabfrage**: Ein einziger Hook/Composable, um alle Inhalte für ein Wörterbuch abzurufen. - **Organisierter Codebasis**: 1 Komponente = 1 Wörterbuch im selben Ordner. - **Erweiterte Routing-Funktionen**: Helfer für **Vue Router/Nuxt** lokalisierte Pfade und Metadaten. - **Markdown-Unterstützung**: Importieren Sie remote/lokales Markdown pro Sprache; stellen Sie Frontmatter dem Code zur Verfügung. - **Kostenloser visueller Editor & optionales CMS**: Erstellung ohne kostenpflichtige Lokalisierungsplattform; Git-freundliche Synchronisation. - **Tree-shakable Inhalte**: Liefert nur das, was verwendet wird; unterstützt Lazy Loading. - **SSG-freundlich**: Blockiert das statische Rendering nicht. - **KI-gestützte Übersetzungen**: Übersetzen Sie in 231 Sprachen mit Ihrem eigenen KI-Anbieter/API-Schlüssel. - **MCP-Server & VSCode-Erweiterung**: Automatisieren Sie i18n-Workflows und das Verfassen direkt in Ihrer IDE. - **Interoperabilität**: Verbindet bei Bedarf mit **vue-i18n**, **react-i18next** und **react-intl**. --- ## Wann welches wählen? - **Wählen Sie vue-i18n**, wenn Sie den **standardmäßigen Vue-Ansatz** bevorzugen, gerne selbst Kataloge/Namespaces verwalten und Ihre App **klein bis mittelgroß** ist (oder Sie bereits Nuxt i18n verwenden). - **Wählen Sie Intlayer**, wenn Sie **komponentenbezogenen Inhalt**, **striktes TypeScript**, **Build-Zeit-Garantien**, **Tree-Shaking** und **umfangreiche Routing/SEO/Editor-Tools** schätzen – besonders für **große, modulare Vue/Nuxt-Codebasen**. --- ## Praktische Migrationshinweise (vue-i18n → Intlayer) - **Pro Funktion starten**: Verschieben Sie eine Route/Ansicht/Komponente nach der anderen in lokale Intlayer-Wörterbücher. - **Brücke während der Migration**: Behalten Sie die vue-i18n-Kataloge parallel bei; ersetzen Sie die Abfragen schrittweise. - **Strenge Prüfungen aktivieren**: Lassen Sie fehlende Schlüssel/Locales frühzeitig zur Build-Zeit erkennen. - **Router/SEO-Hilfen übernehmen**: Standardisieren Sie die Lokalerkennung und `hreflang`-Tags. - **Bundles messen**: Erwarten Sie **Reduzierungen der Bundle-Größe**, da ungenutzte Inhalte ausgeschlossen werden. --- ## Fazit Sowohl **vue-i18n** als auch **Intlayer** lokalisieren Vue-Apps gut. Der Unterschied liegt darin, **wie viel Sie selbst aufbauen müssen**, um eine robuste, skalierbare Lösung zu erreichen: - Mit **Intlayer** sind **modularer Inhalt**, **striktes TypeScript**, **Build-Zeit-Sicherheit**, **baumgeschüttelte Bundles** sowie **Router-/SEO-/Editor-Tools** **standardmäßig enthalten**. - Wenn Ihr Team **Wartbarkeit und Geschwindigkeit** in einer mehrsprachigen, komponentenbasierten Vue/Nuxt-Anwendung priorisiert, bietet Intlayer heute die **vollständigste** Erfahrung. Siehe das Dokument ['Warum Intlayer?'](https://intlayer.org/doc/why) für weitere Details.