@intlayer/docs 9.5.5 → 9.5.7

package/blog/de/vue-i18n_vs_intlayer-vue-i18n.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n vs @intlayer/vue-i18n: Gleiche API, Anderes Bundle"
 description: Was sich ändert, wenn eine Vue 3-App ihre vue-i18n-Aufrufe beibehält, aber sie über den @intlayer/vue-i18n Compat-Adapter bereitstellt. Pro-Seite JavaScript, Laufzeit-Größe, Komponenten-Größe und Leakage gemessen auf demselben Vite + Vue Code, plus was der Adapter behält, ignoriert und nicht ersetzen kann.
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n VS @intlayer/vue-i18n | Gleiche API, Anderes Bundle
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` ist ein Kompatibilitätsadapter: Er stellt die `vue-i18n` API (`createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t`, `v-t`, `i18n.global.locale`...) bereit und bedient sie aus von Intlayer kompilierten Wörterbüchern. Ihre `.vue` Dateien ändern sich nicht. Woran sich `t("footer.github")` bindet, tut es.
 
 Dieser Artikel misst diesen Austausch auf derselben Vite + Vue 3 Anwendung, die einmal mit `vue-i18n` und einmal mit dem Adapter gebaut wurde. Die Zahlen stammen von [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Für `vue-i18n` und Intlayer als Bibliotheken verglichen, lesen Sie [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) und den [vue-i18n vs Intlayer Benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark). Diesen Artikel geht es darum, was der Adapter ändert, wenn Sie Ihre Komponenten so behalten, wie sie sind.
@@ -105,6 +107,10 @@ Für jeden Build zeichnet die Suite folgendes auf:
 
 ### Ergebnisse auf Vite + Vue 3
 
+Wählen Sie die Metriken und Bibliotheken aus, die für Sie wichtig sind:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | Setup                    | Strategie | Lib-Größe (gz) | Lib-Größe (min) | Page JS ø (gz) | Locale Leak | Page Leak | Component ø (gz) | E2E Reaktivität | Seiten-Ladung |
 | ------------------------ | --------- | -------------: | --------------: | -------------: | ----------: | --------: | ---------------: | --------------: | ------------: |
 | **base** (kein i18n)     | -         |         0.0 KB |          0.0 KB |        41.3 KB |        0.0% |         - |           1.1 KB |          1.8 ms |       10.8 ms |
@@ -124,11 +130,24 @@ Für jeden Build zeichnet die Suite folgendes auf:
 - **Reaktivität und Seitenladezeit.** Locale-Wechsel sind kostengünstig für beide (1,5–2,8 ms); Vues Reaktivitätssystem macht es so, sobald Nachrichten im Speicher sind. Die Seitenladezeit geht von 13,6 ms auf **9,3 ms** zurück, in Übereinstimmung mit 88 KB weniger JavaScript zum Parsen.
 - **Zu den nativen Zeilen.** `vue-intlayer` bundelte in diesem Durchlauf jedes Locale im `static`-Modus und erreichte 57,1 KB mit einer 3,9-KB-Runtime; die synchronisierten Wörterbücher des Adapters trugen weniger fremdsprachige Strings, daher die niedrigere Zahl pro Seite. Die native Runtime bleibt die leichteste der drei, und ihr `.content.ts`-Modell ist der Ort, an dem SFC `<i18n>`-Blöcke ihr Äquivalent finden.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Vollständige Tabelle, jede Bibliothek und jede Strategie, im [Vue-Benchmark-Bericht](https://intlayer.org/de/doc/benchmark/vue).
+
 ## Warum sich die Zahlen verschieben
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Nichts in `src/components/` hat sich geändert, daher stammen die Gewinne von dem, an das `useI18n` gebunden ist.
 
-**Mit `vue-i18n`** ist die Bindung die globale Instanz. `createI18n({ messages: { en, fr, ... } })` ist ein Import, der alles enthält; jede Komponente, die `useI18n()` aufruft, kann auf alles zugreifen, daher kann der Bundler nicht unter der Instanz aufteilen. Optimieren bedeutet, dass _Sie_ `en.json` nach Route aufteilen, `setLocaleMessage()` in einem Router Guard aufrufen und die Route-to-File-Zuordnung korrekt halten, während sich Komponenten verschieben.
+**Mit `vue-i18n`** ist die Bindung die globale Instanz. `createI18n({ messages: { en, fr, ... } })` ist ein Import, der alles enthält; jede Komponente, die `useI18n()` aufruft, kann auf alles zugreifen, daher kann der Bundler nicht unter der Instanz aufteilen. Optimieren bedeutet, dass _Sie_ `en.json` nach Route aufteilen, `setLocaleMessage()` in einem Router Guard aufrufen und die Route-to-File-Zuordnung korrekt halten, während sich Komponenten verschieben. Die Verschwendung wächst auf zwei Achsen gleichzeitig, Seiten und Sprachen:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -258,26 +277,107 @@ export const i18n = createI18n({ locale: "en" });
 
 ## Einschränkungen, die Sie kennen sollten, bevor Sie beginnen
 
-- **SFC `<i18n>` Blöcke werden nicht gelesen.** Wenn sich Ihre Meldungen in Komponenten befinden, müssen sie in die Locale-Dateien verschoben werden (oder zu `.content.ts`, was die gleiche Idee mit Typen ist).
-- **Laufzeit-Meldungsladung ist weg.** `setLocaleMessage()` und `mergeLocaleMessage()` geben eine Warnung aus und kehren zurück. Übersetzungen, die zur Laufzeit von einem CMS abgerufen werden, benötigen Intlayers CMS oder die Befehle `intlayer pull` / `push`.
-- **`messages` ist ein Fallback, nicht kostenlos.** Das Beibehalten der JSON-Importe in `createI18n()` behält die 75 KB im Bundle. Löschen Sie sie, sobald `intlayer test` bestanden hat.
-- **Der Adapter ist nicht die native Runtime.** 7,9 KB gegen 3,9 KB für `vue-intlayer`. Sobald jede Komponente zu `useIntlayer` migriert ist, kann er gelöscht werden.
+<AccordionGroup>
+<Accordion header="SFC <i18n>-Blöcke werden nicht gelesen">
+
+Wenn sich Ihre Nachrichten innerhalb von Komponenten befinden, müssen sie in die Sprachdateien oder in eine `.content.ts`-Datei verschoben werden, was dieselbe Idee mit generierten Typen darstellt.
+
+</Accordion>
+<Accordion header="Das Laden von Nachrichten zur Laufzeit entfällt">
+
+`setLocaleMessage()` und `mergeLocaleMessage()` geben eine Warnung aus und brechen ab. Übersetzungen, die zur Laufzeit von einem CMS abgerufen werden, erfordern das [Intlayer-CMS](https://intlayer.org/de/doc/concept/cms) oder die Befehle `intlayer pull` / `push`.
+
+</Accordion>
+<Accordion header="messages ist ein Fallback, nicht kostenlos">
+
+Das Beibehalten der JSON-Importe in `createI18n()` behält die 75 KB im Bundle bei. Löschen Sie sie, sobald `intlayer test` erfolgreich ist.
+
+</Accordion>
+<Accordion header="Der Adapter ist nicht die native Laufzeit">
+
+7.9 KB gegenüber 3.9 KB für `vue-intlayer`. Sobald jede Komponente auf `useIntlayer` umgestellt ist, entfernen Sie ihn.
+
+</Accordion>
+</AccordionGroup>
 
 ## Wann welche Option verwenden?
 
-- **Bleiben Sie bei `vue-i18n`**, wenn Ihre App von SFC `<i18n>` Blöcken abhängt, von Runtime `setLocaleMessage()` Flows, oder wenn 90 KB pro Seite für Ihr Publikum kein Problem darstellen.
-- **Verwenden Sie `@intlayer/vue-i18n`**, wenn Sie auf `vue-i18n` sind und die 88 KB, die 23x kleineren Komponenten, 0% Seiten-Leakage, typsichere Keys und CI-Checks ohne das Bearbeiten einer `.vue` Datei möchten. Dies ist der Einstiegspunkt für eine bestehende `vue-i18n` codebase.
-- **Gehen Sie native (`vue-intlayer`)** für neue Projekte oder sobald der Adapter seine Arbeit getan hat. Es hat die leichteste Runtime (3,9 KB) und das per-Komponenten `.content.ts` Modell, das `<i18n>` Blöcke durch typsichere Inhalte ersetzt.
+<AccordionGroup>
+<Accordion header="Bei vue-i18n bleiben">
+
+Ihre Anwendung hängt von SFC `<i18n>`-Blöcken oder Laufzeit-`setLocaleMessage()`-Abläufen ab, oder 90 KB pro Seite stellen für Ihr Publikum kein Problem dar.
+
+</Accordion>
+<Accordion header="@intlayer/vue-i18n verwenden">
+
+Sie nutzen `vue-i18n` und möchten 88 KB einsparen, 23-mal kleinere Komponenten, 0% Seiten-Leakage, typisierte Schlüssel und CI-Prüfungen erhalten, ohne eine einzige `.vue`-Datei zu bearbeiten. Dies ist der Einstiegspunkt für eine bestehende `vue-i18n`-Codebasis.
+
+</Accordion>
+<Accordion header="Nativ werden (vue-intlayer)">
+
+Für neue Projekte oder sobald der Adapter seinen Dienst getan hat. Er bietet die leichteste Laufzeit (3.9 KB) und das komponentenspezifische `.content.ts`-Modell, das `<i18n>`-Blöcke durch typisierten Inhalt ersetzt. Starten Sie mit [Intlayer mit Vue](https://intlayer.org/de/doc/environment/vite-and-vue) oder [mit Nuxt](https://intlayer.org/de/doc/environment/nuxt-and-vue).
+
+</Accordion>
+</AccordionGroup>
+
+## FAQ
+
+<FAQ>
+
+<Question title="Muss ich meine .vue-Dateien bearbeiten?">
+
+Nein. Der Benchmark-Build änderte nur `vite.config.ts`, `intlayer.config.ts` und eine Zeile in `src/i18n.ts`, den `messages`-Import. Jeder Aufruf von `useI18n()`, `$t`, `v-t` und der Options-API blieb unverändert.
+
+</Question>
+
+<Question title="Warum ist die Komponentengröße 23x kleiner?">
+
+Weil `useI18n()` nicht mehr auf die globale Instanz zugreift. `createI18n({ messages })` enthält jede Nachricht jeder Sprache, sodass eine isoliert kompilierte Komponente 196 KB mitschleppt. Mit dem Adapter greift sie nur auf ihr eigenes Wörterbuch zu: 8.4 KB.
+
+</Question>
+
+<Question title="Was ist mit d()- und n()-Formatierung?">
+
+Beibehalten. Die an `createI18n()` übergebenen `datetimeFormats` und `numberFormats` werden respektiert und durch natives `Intl` unterstützt. Siehe [Datums-, Uhrzeit- und Zahlenformatierung](https://intlayer.org/de/blog/date-time-number-formatting-locales).
+
+</Question>
+
+<Question title="Funktioniert es mit Nuxt?">
+
+`@intlayer/vue-i18n` zielt auf Vite + Vue ab. Für `@nuxtjs/i18n` verwenden Sie den [Nuxt i18n-Kompatibilitätsadapter](https://intlayer.org/de/doc/compatibility/nuxtjs-i18n) und lesen Sie [Intlayer mit Nuxt](https://intlayer.org/de/doc/environment/nuxt-and-vue) für das native Setup.
+
+</Question>
+
+<Question title="Kann ich Komponente für Komponente migrieren?">
+
+Ja. Jede Komponente kann mit einer danebenliegenden Inhaltsdatei von `useI18n()` zu `useIntlayer("footer")` wechseln. JSON- und `.content.ts`-Wörterbücher koexistieren und verschmelzen.
+
+</Question>
+
+</FAQ>
 
 ## Zugehörige Vergleiche
 
-- [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (Features und DX)
-- [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (die Bibliotheken, gleicher Benchmark)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (gleiche Adapter-Serie)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (gleiche Adapter-Serie)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (gleiche Adapter-Serie)
-- [Migrationsleitfaden: vue-i18n zu Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [Compat adapter reference: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+Gleiche Adapter-Serie:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/de/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/de/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/de/blog/lingui-vs-intlayer-lingui)
+
+Die Bibliotheken im direkten Vergleich:
+
+- [vue-i18n vs Intlayer](https://intlayer.org/de/blog/vue-i18n-vs-intlayer), Features und DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/de/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/de/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/de/blog/how-to-pick-vue-i18n-library)
+
+Referenzdokumentation:
+
+- [Compat adapter: vue-i18n](https://intlayer.org/de/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/de/doc/compatibility/nuxtjs-i18n)
+- [Migrationsleitfaden: vue-i18n zu Intlayer](https://intlayer.org/de/doc/migration/vue-i18n)
+- [Vue-Benchmark-Bericht](https://intlayer.org/de/doc/benchmark/vue)
+- [Bundle-Optimierung](https://intlayer.org/de/doc/concept/bundle-optimization) und [der Intlayer-Compiler](https://intlayer.org/de/doc/compiler)
+- [Visual Editor](https://intlayer.org/de/doc/concept/editor), [CMS](https://intlayer.org/de/doc/concept/cms) und [KI-Übersetzung](https://intlayer.org/de/doc/concept/auto-fill)
 
 ## Fazit
 
@@ -285,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 Alle Rohdaten, die Test-Apps und die Scripts befinden sich im [Benchmark Bloom Repository](https://github.com/intlayer-org/benchmark-bloom). Führen Sie es selbst aus.
 
-Weitere Details finden Sie in der [Dokumentation 'Why Intlayer?'](https://intlayer.org/doc/why).
+Weitere Details finden Sie in der [Dokumentation 'Why Intlayer?'](https://intlayer.org/de/doc/why).

package/blog/de/vue-i18n_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-08-23
+updatedAt: 2026-09-22
 title: vue-i18n vs Intlayer
 description: Vergleich von vue-i18n mit Intlayer für Internationalisierung (i18n) in Vue/Nuxt-Apps
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Vue Internationalisierung (i18n)
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 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:
 
@@ -31,6 +33,8 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 6. **Entwicklererfahrung (DX), Tools & Wartung**
 7. **SEO & Skalierbarkeit für große Projekte**
 
+<TOC/>
+
 > **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
@@ -38,6 +42,30 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 - **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**.
 
+## Was es zur Build-Zeit kostet
+
+Vor den Feature-Tabellen der gemessene Teil. [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) baut dieselbe Vite + Vue 3-App (10 Seiten, 10 Sprachen) mit jeder Bibliothek und zeichnet auf, was der Browser herunterlädt:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+| Setup                | Lib size (gz) | Page JS avg (gz) | Page leak | Component avg (gz) |
+| -------------------- | ------------: | ---------------: | --------: | -----------------: |
+| **base** (no i18n)   |        0.0 KB |          41.3 KB |         - |             1.1 KB |
+| `vue-i18n`           |       24.3 KB |         134.9 KB |     90.0% |           196.0 KB |
+| `@intlayer/vue-i18n` |        7.9 KB |          47.0 KB |      0.0% |             8.4 KB |
+| **`vue-intlayer`**   |    **3.9 KB** |      **57.1 KB** |  **0.0%** |         **7.7 KB** |
+
+Die `vue-i18n`-Laufzeit allein wiegt **das 6-fache** von Intlayer, jede Seite transportiert **90% fremde Seiten-Strings**, und eine isoliert kompilierte Komponente schleppt **196 KB** mit sich, weil `useI18n()` sie an den globalen Nachrichtenbaum bindet. Der vollständige Durchlauf mit Reaktivitäts- und Seitenladezeiten findet sich im [vue-i18n vs Intlayer Benchmark](https://intlayer.org/de/blog/vue-i18n-vs-intlayer-benchmark).
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Vollständige Tabelle im [Vue-Benchmark-Bericht](https://intlayer.org/de/doc/benchmark/vue).
+
 ## Gegenüberstellung der Funktionen (Vue-fokussiert)
 
 | Funktion                                           | **Intlayer**                                                                                   | **vue-i18n**                                                                                               |
@@ -63,59 +91,74 @@ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten
 
 ## Tiefgehender Vergleich
 
-### 1) Architektur & Skalierbarkeit
+<AccordionGroup>
+<Accordion header="1) Architektur und 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.
+- **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. Siehe [Komponenten-basierte vs. zentralisierte i18n](https://intlayer.org/de/blog/per-component-vs-centralized-i18n).
 - **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
+</Accordion>
+<Accordion header="2) TypeScript und 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
+</Accordion>
+<Accordion header="3) Behandlung fehlender Ü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.
+- **vue-i18n**: **Laufzeit**-Warnungen/Fallbacks (z.B. Rückfall auf Locale oder Schlüssel). Siehe [Erkennung fehlender Übersetzungen](https://intlayer.org/de/blog/detecting-missing-translations).
+- **Intlayer**: **Buildzeit**-Erkennung mit Warnungen/Fehlern über alle Locales und Schlüssel hinweg., plus `npx intlayer test` in CI.
 
 **Warum das wichtig ist:** Durchsetzung zur Buildzeit hält die Produktions-UI sauber und konsistent.
 
-### 4) Routing- & URL-Strategie (Vue Router/Nuxt)
+</Accordion>
+<Accordion header="4) Routing- und URL-Strategie (Vue Router/Nuxt)">
 
-- **Beide** können mit lokalisierten Routen arbeiten.
+- **Beide** können mit lokalisierten Routen arbeiten. Siehe den [hreflang-Leitfaden](https://intlayer.org/de/blog/hreflang-guide-multilingual-seo).
 - **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
+</Accordion>
+<Accordion header="5) Performance und Ladeverhalten">
 
-- **vue-i18n**: Unterstützt asynchrone Locale-Nachrichten; das Vermeiden von Über-Bundling liegt bei dir (Kataloge sorgfältig aufteilen).
+- **vue-i18n**: Unterstützt asynchrone Locale-Nachrichten; das Vermeiden von Über-Bundling liegt bei dir (Kataloge sorgfältig aufteilen). Der obige Benchmark belegt dies mit Zahlen: 134.9 KB gegenüber 57.1 KB pro Seite.
 - **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
+</Accordion>
+<Accordion header="6) Entwicklererfahrung und Tooling">
 
 - **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.
+- **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., ein **MCP-Server**
 
 **Warum das wichtig ist:** Geringere Betriebskosten und eine kürzere Entwicklungs-Content-Schleife.
 
-### 7) SEO, SSR & SSG
+</Accordion>
+<Accordion header="7) SEO, SSR und SSG">
 
-- **Beide** funktionieren mit Vue SSR und Nuxt.
+- **Beide** funktionieren mit Vue SSR und Nuxt. Siehe [Internationalisierung und SEO](https://intlayer.org/de/blog/SEO-and-i18n).
 - **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.
 
+</Accordion>
+</AccordionGroup>
+
 ## Warum Intlayer? (Problem & Ansatz)
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 Die meisten i18n-Stacks (einschließlich **vue-i18n**) starten mit **zentralisierten Katalogen**:
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="Eine Datei pro Sprache" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -127,7 +170,8 @@ Die meisten i18n-Stacks (einschließlich **vue-i18n**) starten mit **zentralisie
         └── MyComponent.vue
 ```
 
-Oder mit pro-Locale-Ordnern:
+</Tab>
+<Tab label="Ein Ordner pro Sprache" value="per-folder">
 
 ```bash
 .
@@ -146,6 +190,34 @@ Oder mit pro-Locale-Ordnern:
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+Dieser Ordner wächst ständig, ein Namespace pro Feature in jeder Sprache:
+
+```txt
+locales
+├── EN
+│   ├── blog.json
+│   ├── about.json
+│   ├── auth.json
+│   ├── blog.json
+│   ├── cart.json
+│   ├── categories.json
+│   ├── contact.json
+│   ├── dashboard.json
+│   ├── errors.json
+│   ├── faq.json
+│   ├── footer.json
+│   ├── form.json
+│   ├── home.json
+│   ├── language.json
+│   ├── navbar.json
+│   ├── ... 65 files
+│   └── validation.json
+└── ES
+```
+
 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).
@@ -161,7 +233,33 @@ Dies verlangsamt die Entwicklung oft, wenn Anwendungen wachsen:
         └── MyComponent.vue
 ```
 
-**Inhaltsdeklaration** (pro Komponente):
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="./locales/en.json"
+{
+  "componentExample": {
+    "greeting": "Hello World"
+  }
+}
+```
+
+```vue fileName="./components/MyComponent.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span>{{ t("componentExample.greeting") }}</span>
+</template>
+```
+
+Jede Sprachdatei muss manuell bearbeitet werden, und der Schlüssel ist eine einfache Zeichenkette: Ein Tippfehler wird in der Produktion als `componentExample.greting` ausgegeben.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -171,8 +269,8 @@ const componentExampleContent = {
   content: {
     greeting: t({
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -180,11 +278,10 @@ const componentExampleContent = {
 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
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -193,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+Alle Sprachen liegen in einer einzigen typisierten Datei neben der Komponente.
+
+</Tab>
+</Tabs>
+
 Dieser Ansatz:
 
 - **Beschleunigt die Entwicklung** (einmal deklarieren; IDE/AI vervollständigt automatisch).
@@ -220,22 +322,71 @@ Dieser Ansatz:
 
 ## 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**.
+<AccordionGroup>
+<Accordion header="vue-i18n wählen">
+
+Sie möchten den **Standard-Vue-Ansatz**, können Kataloge und Namespaces problemlos selbst verwalten und Ihre Anwendung ist **klein bis mittelgroß** (oder Sie setzen bereits auf Nuxt i18n). SFC `<i18n>`-Blöcke und Laufzeit-`setLocaleMessage()` sind Funktionen, die Intlayer bewusst nicht repliziert.
+
+</Accordion>
+<Accordion header="Intlayer wählen">
+
+Sie legen Wert auf **komponentenbezogenen Inhalt**, **striktes TypeScript**, **Garantien zur Build-Zeit**, **Tree-Shaking** und integrierte Routing-, SEO- und Editor-Tools, insbesondere für **große, modulare Vue/Nuxt-Codebasen** und Design-Systeme. Starten Sie mit [Intlayer mit Vue](https://intlayer.org/de/doc/environment/vite-and-vue) oder [mit Nuxt](https://intlayer.org/de/doc/environment/nuxt-and-vue).
+
+</Accordion>
+<Accordion header="@intlayer/vue-i18n wählen">
+
+Sie nutzen heute `vue-i18n` und möchten Bundle-Einsparungen ohne Bearbeitung einer `.vue`-Datei erzielen. Der [Kompatibilitätsadapter](https://intlayer.org/de/doc/compatibility/vue-i18n) behält `createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t` und `v-t` bei und bedient sie aus kompilierten Wörterbüchern. Seite an Seite gemessen in [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/de/blog/vue-i18n-vs-intlayer-vue-i18n).
+
+</Accordion>
+</AccordionGroup>
 
 ## Interoperabilität mit vue-i18n
 
 `intlayer` kann auch bei der Verwaltung deiner `vue-i18n` Namespaces helfen.
 
-Mit `intlayer` kannst du deinen Content im Format deiner bevorzugten i18n-Bibliothek deklarieren, und intlayer generiert deine Namespaces an dem Ort deiner Wahl (Beispiel: `/messages/{{locale}}/{{namespace}}.json`).
+Mit `intlayer` kannst du deinen Content im Format deiner bevorzugten i18n-Bibliothek deklarieren, und intlayer generiert deine Namespaces an dem Ort deiner Wahl (Beispiel: `/messages/{{locale}}/{{namespace}}.json`). Siehe die [vue-i18n-Kompatibilitätsdokumentation](https://intlayer.org/de/doc/compatibility/vue-i18n) und den [Nuxt i18n-Adapter](https://intlayer.org/de/doc/compatibility/nuxtjs-i18n).
+
+## FAQ
+
+<FAQ>
+
+<Question title="Ist Intlayer ein Ersatz für vue-i18n oder eine Schicht darüber?">
+
+Beides, je nachdem, wie Sie es einsetzen. `vue-intlayer` ist eine native Laufzeit mit einem eigenen `useIntlayer()`-Composable. `@intlayer/vue-i18n` ist ein Kompatibilitätsadapter, der die `vue-i18n`-API beibehält und deren Bindung austauscht, sodass Sie ohne Änderung der Komponenten migrieren und später Datei für Datei umstellen können.
+
+</Question>
+
+<Question title="Was passiert mit meinen SFC <i18n>-Blöcken?">
+
+Der Adapter liest sie nicht. Verschieben Sie diese Nachrichten in Ihre Sprach-JSON oder in eine `.content.ts`-Datei neben der Komponente, was dieselbe Idee mit generierten Typen darstellt. Das ist die einzige `vue-i18n`-Funktion, die nicht übernommen wird.
 
-## Praktische Migrationshinweise (vue-i18n → Intlayer)
+</Question>
 
-- **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.
+<Question title="Funktioniert Intlayer mit Nuxt?">
+
+Ja. [Intlayer mit Nuxt](https://intlayer.org/de/doc/environment/nuxt-and-vue) umfasst mehrsprachiges Routing, Middleware zur Spracherkennung und Sitemap-Generierung. Wenn Sie `@nuxtjs/i18n` nutzen, ist der [Nuxt i18n-Kompatibilitätsadapter](https://intlayer.org/de/doc/compatibility/nuxtjs-i18n) der Migrationspfad.
+
+</Question>
+
+<Question title="Kann ich meine locales/{locale}.json als Source of Truth behalten?">
+
+Ja. Das [JSON-Sync-Plugin](https://intlayer.org/de/doc/compatibility/vue-i18n) liest sie mit dem `vue-i18n`-Dialekt (`{name}`, `{0}`, Pipe-Plurale `"car | cars"`) und schreibt Übersetzungen zurück, wenn die CLI oder das CMS sie aktualisiert.
+
+</Question>
+
+<Question title="Funktioniert ICU mit Intlayer auf Vue?">
+
+Die native ICU-Unterstützung ist in Arbeit. Der `@intlayer/vue-i18n`-Adapter unterstützt die eigene Nachrichtensyntax von `vue-i18n`, einschließlich Pipe-Pluralen sowie benannter und Listen-Interpolation. Für das Pluralisierungsmodell von Intlayer siehe [Aufzählungsinhalt](https://intlayer.org/de/doc/concept/content/enumeration).
+
+</Question>
+
+</FAQ>
+
+## GitHub STARs
+
+GitHub-Stars sind ein starker Indikator für die Beliebtheit eines Projekts, das Vertrauen der Community und die langfristige Relevanz. Sie sind zwar kein direktes Maß für die technische Qualität, spiegeln jedoch wider, wie viele Entwickler das Projekt nützlich finden, seine Fortschritte verfolgen und es wahrscheinlich übernehmen werden. Zur Bewertung des Projektwerts helfen Stars dabei, das Interesse alternativer Lösungen zu vergleichen und Einblicke in das Wachstum des Ökosystems zu gewinnen.
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 ## Fazit
 
@@ -244,4 +395,15 @@ Sowohl **vue-i18n** als auch **Intlayer** lokalisieren Vue-Apps gut. Der Untersc
 - 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.
+## Weiterführende Literatur
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/de/blog/vue-i18n-vs-intlayer-benchmark), der gemessene Durchlauf hinter der obigen Tabelle
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/de/blog/vue-i18n-vs-intlayer-vue-i18n), der Adapter auf derselben App
+- [Is vue-i18n outdated?](https://intlayer.org/de/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/de/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/de/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/de/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/de/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/de/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/de/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/de/doc/why) for more details.