@intlayer/docs 5.8.0-canary.0 → 5.8.1-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (223) hide show
  1. package/blog/ar/intlayer_with_next-i18next.md +2 -2
  2. package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +96 -219
  3. package/blog/ar/react-i18next_vs_react-intl_vs_intlayer.md +88 -129
  4. package/blog/ar/vue-i18n_vs_intlayer.md +268 -0
  5. package/blog/de/intlayer_with_next-i18next.md +2 -2
  6. package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  7. package/blog/de/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  8. package/blog/de/vue-i18n_vs_intlayer.md +268 -0
  9. package/blog/en/intlayer_with_next-i18next.md +2 -2
  10. package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  11. package/blog/en/react-i18next_vs_react-intl_vs_intlayer.md +88 -120
  12. package/blog/en/vue-i18n_vs_intlayer.md +276 -0
  13. package/blog/en-GB/intlayer_with_next-i18next.md +2 -2
  14. package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +85 -218
  15. package/blog/en-GB/react-i18next_vs_react-intl_vs_intlayer.md +80 -130
  16. package/blog/en-GB/vue-i18n_vs_intlayer.md +258 -0
  17. package/blog/es/intlayer_with_next-i18next.md +2 -2
  18. package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  19. package/blog/es/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  20. package/blog/es/vue-i18n_vs_intlayer.md +268 -0
  21. package/blog/fr/intlayer_with_next-i18next.md +2 -2
  22. package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
  23. package/blog/fr/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
  24. package/blog/fr/vue-i18n_vs_intlayer.md +269 -0
  25. package/blog/hi/intlayer_with_next-i18next.md +2 -2
  26. package/blog/hi/next-i18next_vs_next-intl_vs_intlayer.md +97 -220
  27. package/blog/hi/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
  28. package/blog/hi/vue-i18n_vs_intlayer.md +268 -0
  29. package/blog/it/intlayer_with_next-i18next.md +2 -2
  30. package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +91 -214
  31. package/blog/it/react-i18next_vs_react-intl_vs_intlayer.md +86 -127
  32. package/blog/it/vue-i18n_vs_intlayer.md +268 -0
  33. package/blog/ja/intlayer_with_next-i18next.md +2 -2
  34. package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  35. package/blog/ja/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  36. package/blog/ja/vue-i18n_vs_intlayer.md +268 -0
  37. package/blog/ko/intlayer_with_next-i18next.md +2 -2
  38. package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +95 -217
  39. package/blog/ko/react-i18next_vs_react-intl_vs_intlayer.md +89 -130
  40. package/blog/ko/vue-i18n_vs_intlayer.md +268 -0
  41. package/blog/pt/intlayer_with_next-i18next.md +2 -2
  42. package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  43. package/blog/pt/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  44. package/blog/pt/vue-i18n_vs_intlayer.md +268 -0
  45. package/blog/ru/intlayer_with_next-i18next.md +2 -2
  46. package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +94 -217
  47. package/blog/ru/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  48. package/blog/ru/vue-i18n_vs_intlayer.md +268 -0
  49. package/blog/zh/intlayer_with_next-i18next.md +2 -2
  50. package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +93 -216
  51. package/blog/zh/react-i18next_vs_react-intl_vs_intlayer.md +87 -128
  52. package/blog/zh/vue-i18n_vs_intlayer.md +269 -0
  53. package/dist/cjs/generated/blog.entry.cjs +41 -0
  54. package/dist/cjs/generated/blog.entry.cjs.map +1 -1
  55. package/dist/esm/generated/blog.entry.mjs +41 -0
  56. package/dist/esm/generated/blog.entry.mjs.map +1 -1
  57. package/dist/types/generated/blog.entry.d.ts +1 -0
  58. package/dist/types/generated/blog.entry.d.ts.map +1 -1
  59. package/docs/ar/formatters.md +417 -31
  60. package/docs/ar/how_works_intlayer.md +2 -4
  61. package/docs/ar/interest_of_intlayer.md +7 -10
  62. package/docs/ar/intlayer_CMS.md +2 -3
  63. package/docs/ar/intlayer_visual_editor.md +2 -3
  64. package/docs/ar/intlayer_with_tanstack.md +1 -1
  65. package/docs/ar/introduction.md +4 -4
  66. package/docs/de/formatters.md +444 -34
  67. package/docs/de/introduction.md +2 -2
  68. package/docs/en/dictionary/enumeration.md +2 -2
  69. package/docs/en/dictionary/function_fetching.md +2 -2
  70. package/docs/en/dictionary/get_started.md +2 -2
  71. package/docs/en/dictionary/translation.md +2 -2
  72. package/docs/en/formatters.md +383 -15
  73. package/docs/en/how_works_intlayer.md +2 -4
  74. package/docs/en/interest_of_intlayer.md +48 -29
  75. package/docs/en/intlayer_CMS.md +2 -3
  76. package/docs/en/intlayer_visual_editor.md +2 -3
  77. package/docs/en/intlayer_with_create_react_app.md +2 -2
  78. package/docs/en/intlayer_with_express.md +2 -2
  79. package/docs/en/intlayer_with_tanstack.md +1 -1
  80. package/docs/en/introduction.md +4 -4
  81. package/docs/en/packages/express-intlayer/index.md +2 -2
  82. package/docs/en/packages/intlayer/getConfiguration.md +2 -3
  83. package/docs/en/packages/intlayer/getEnumeration.md +2 -7
  84. package/docs/en/packages/intlayer/getHTMLTextDir.md +2 -4
  85. package/docs/en/packages/intlayer/getLocaleLang.md +2 -4
  86. package/docs/en/packages/intlayer/getLocaleName.md +2 -3
  87. package/docs/en/packages/intlayer/getLocalizedUrl.md +2 -8
  88. package/docs/en/packages/intlayer/getMultilingualUrls.md +2 -7
  89. package/docs/en/packages/intlayer/getPathWithoutLocale.md +2 -3
  90. package/docs/en/packages/intlayer/getTranslation.md +2 -4
  91. package/docs/en/packages/intlayer/index.md +2 -2
  92. package/docs/en/packages/next-intlayer/index.md +2 -2
  93. package/docs/en/packages/next-intlayer/t.md +2 -2
  94. package/docs/en/packages/next-intlayer/useDictionary.md +2 -2
  95. package/docs/en/packages/next-intlayer/useIntlayer.md +2 -2
  96. package/docs/en/packages/next-intlayer/useLocale.md +2 -2
  97. package/docs/en/packages/react-intlayer/index.md +2 -2
  98. package/docs/en/packages/react-intlayer/t.md +2 -2
  99. package/docs/en/packages/react-intlayer/useI18n.md +2 -2
  100. package/docs/en/packages/react-intlayer/useIntlayer.md +2 -2
  101. package/docs/en/packages/react-intlayer/useLocale.md +2 -2
  102. package/docs/en/packages/react-scripts-intlayer/index.md +2 -2
  103. package/docs/en/packages/solid-intlayer/index.md +2 -2
  104. package/docs/en/packages/vite-intlayer/index.md +2 -2
  105. package/docs/en-GB/formatters.md +402 -16
  106. package/docs/en-GB/how_works_intlayer.md +2 -4
  107. package/docs/en-GB/interest_of_intlayer.md +7 -10
  108. package/docs/en-GB/intlayer_with_tanstack.md +1 -1
  109. package/docs/en-GB/introduction.md +2 -2
  110. package/docs/es/formatters.md +438 -28
  111. package/docs/es/how_works_intlayer.md +2 -4
  112. package/docs/es/interest_of_intlayer.md +7 -10
  113. package/docs/es/intlayer_with_tanstack.md +1 -1
  114. package/docs/es/introduction.md +2 -2
  115. package/docs/fr/formatters.md +438 -28
  116. package/docs/fr/how_works_intlayer.md +2 -4
  117. package/docs/fr/interest_of_intlayer.md +7 -10
  118. package/docs/fr/intlayer_with_tanstack.md +1 -1
  119. package/docs/fr/introduction.md +2 -2
  120. package/docs/hi/formatters.md +430 -39
  121. package/docs/hi/how_works_intlayer.md +2 -4
  122. package/docs/hi/interest_of_intlayer.md +7 -10
  123. package/docs/hi/intlayer_with_tanstack.md +1 -1
  124. package/docs/hi/introduction.md +2 -2
  125. package/docs/it/formatters.md +438 -30
  126. package/docs/it/how_works_intlayer.md +2 -4
  127. package/docs/it/interest_of_intlayer.md +7 -10
  128. package/docs/it/intlayer_with_tanstack.md +1 -1
  129. package/docs/it/introduction.md +2 -2
  130. package/docs/ja/formatters.md +435 -47
  131. package/docs/ja/how_works_intlayer.md +2 -4
  132. package/docs/ja/interest_of_intlayer.md +7 -10
  133. package/docs/ja/intlayer_with_tanstack.md +1 -1
  134. package/docs/ja/introduction.md +2 -2
  135. package/docs/ko/formatters.md +432 -41
  136. package/docs/ko/how_works_intlayer.md +2 -4
  137. package/docs/ko/interest_of_intlayer.md +7 -10
  138. package/docs/ko/intlayer_with_tanstack.md +1 -1
  139. package/docs/ko/introduction.md +2 -2
  140. package/docs/pt/formatters.md +416 -30
  141. package/docs/pt/how_works_intlayer.md +2 -4
  142. package/docs/pt/intlayer_with_tanstack.md +1 -1
  143. package/docs/pt/introduction.md +2 -2
  144. package/docs/ru/autoFill.md +2 -2
  145. package/docs/ru/configuration.md +1 -40
  146. package/docs/ru/formatters.md +438 -28
  147. package/docs/ru/how_works_intlayer.md +5 -7
  148. package/docs/ru/index.md +1 -1
  149. package/docs/ru/interest_of_intlayer.md +8 -11
  150. package/docs/ru/intlayer_CMS.md +7 -8
  151. package/docs/ru/intlayer_cli.md +4 -7
  152. package/docs/ru/intlayer_visual_editor.md +5 -6
  153. package/docs/ru/intlayer_with_angular.md +1 -1
  154. package/docs/ru/intlayer_with_create_react_app.md +5 -5
  155. package/docs/ru/intlayer_with_lynx+react.md +1 -1
  156. package/docs/ru/intlayer_with_nextjs_15.md +3 -3
  157. package/docs/ru/intlayer_with_nextjs_page_router.md +2 -2
  158. package/docs/ru/intlayer_with_nuxt.md +1 -1
  159. package/docs/ru/intlayer_with_react_native+expo.md +2 -2
  160. package/docs/ru/intlayer_with_tanstack.md +3 -3
  161. package/docs/ru/intlayer_with_vite+preact.md +3 -3
  162. package/docs/ru/intlayer_with_vite+react.md +3 -3
  163. package/docs/ru/intlayer_with_vite+solid.md +1 -1
  164. package/docs/ru/intlayer_with_vite+svelte.md +1 -1
  165. package/docs/ru/intlayer_with_vite+vue.md +2 -2
  166. package/docs/ru/introduction.md +5 -5
  167. package/docs/ru/locale_mapper.md +1 -1
  168. package/docs/ru/packages/@intlayer/api/index.md +2 -2
  169. package/docs/ru/packages/@intlayer/chokidar/index.md +1 -1
  170. package/docs/ru/packages/@intlayer/cli/index.md +2 -2
  171. package/docs/ru/packages/@intlayer/config/index.md +2 -2
  172. package/docs/ru/packages/@intlayer/core/index.md +2 -2
  173. package/docs/ru/packages/@intlayer/design-system/index.md +2 -2
  174. package/docs/ru/packages/@intlayer/dictionary-entry/index.md +2 -2
  175. package/docs/ru/packages/@intlayer/editor/index.md +1 -1
  176. package/docs/ru/packages/@intlayer/editor-react/index.md +1 -1
  177. package/docs/ru/packages/@intlayer/webpack/index.md +1 -1
  178. package/docs/ru/packages/angular-intlayer/index.md +1 -1
  179. package/docs/ru/packages/express-intlayer/index.md +3 -3
  180. package/docs/ru/packages/express-intlayer/t.md +1 -1
  181. package/docs/ru/packages/intlayer/getEnumeration.md +3 -8
  182. package/docs/ru/packages/intlayer/getTranslation.md +3 -5
  183. package/docs/ru/packages/intlayer/getTranslationContent.md +1 -3
  184. package/docs/ru/packages/intlayer/index.md +3 -3
  185. package/docs/ru/packages/intlayer-cli/index.md +1 -1
  186. package/docs/ru/packages/intlayer-editor/index.md +2 -2
  187. package/docs/ru/packages/lynx-intlayer/index.md +1 -1
  188. package/docs/ru/packages/next-intlayer/index.md +4 -4
  189. package/docs/ru/packages/next-intlayer/t.md +4 -4
  190. package/docs/ru/packages/next-intlayer/useLocale.md +3 -3
  191. package/docs/ru/packages/nuxt-intlayer/index.md +1 -1
  192. package/docs/ru/packages/preact-intlayer/index.md +1 -1
  193. package/docs/ru/packages/react-intlayer/index.md +4 -4
  194. package/docs/ru/packages/react-intlayer/t.md +4 -4
  195. package/docs/ru/packages/react-native-intlayer/index.md +1 -1
  196. package/docs/ru/packages/react-scripts-intlayer/index.md +3 -3
  197. package/docs/ru/packages/solid-intlayer/index.md +3 -3
  198. package/docs/ru/packages/svelte-intlayer/index.md +1 -1
  199. package/docs/ru/packages/vite-intlayer/index.md +3 -3
  200. package/docs/ru/packages/vue-intlayer/index.md +1 -1
  201. package/docs/ru/per_locale_file.md +1 -1
  202. package/docs/ru/roadmap.md +3 -5
  203. package/docs/ru/vs_code_extension.md +1 -1
  204. package/docs/zh/formatters.md +446 -38
  205. package/docs/zh/how_works_intlayer.md +2 -4
  206. package/docs/zh/interest_of_intlayer.md +7 -10
  207. package/docs/zh/intlayer_with_tanstack.md +1 -1
  208. package/docs/zh/introduction.md +2 -2
  209. package/frequent_questions/ar/domain_routing.md +1 -1
  210. package/frequent_questions/en/domain_routing.md +1 -1
  211. package/frequent_questions/en-GB/domain_routing.md +1 -1
  212. package/frequent_questions/es/domain_routing.md +1 -1
  213. package/frequent_questions/fr/domain_routing.md +1 -1
  214. package/frequent_questions/hi/domain_routing.md +1 -1
  215. package/frequent_questions/it/domain_routing.md +1 -1
  216. package/frequent_questions/ko/domain_routing.md +1 -1
  217. package/frequent_questions/pt/domain_routing.md +1 -1
  218. package/frequent_questions/ru/domain_routing.md +1 -1
  219. package/frequent_questions/ru/get_locale_cookie.md +4 -4
  220. package/frequent_questions/ru/static_rendering.md +1 -2
  221. package/frequent_questions/zh/domain_routing.md +1 -1
  222. package/package.json +9 -11
  223. package/src/generated/blog.entry.ts +42 -1
@@ -1,14 +1,14 @@
1
1
  ---
2
2
  createdAt: 2025-01-02
3
3
  updatedAt: 2025-06-29
4
- title: react-i18n vs react-intl vs Intlayer
5
- description: Integrieren Sie react-i18next mit next-intl und Intlayer für die Internationalisierung (i18n) einer React-App
4
+ title: react-i18next vs react-intl vs Intlayer
5
+ description: Integration von react-i18next mit next-intl und Intlayer für die Internationalisierung (i18n) einer React-App
6
6
  keywords:
7
7
  - next-intl
8
8
  - react-i18next
9
9
  - Intlayer
10
10
  - Internationalisierung
11
- - Dokumentation
11
+ - Blog
12
12
  - Next.js
13
13
  - JavaScript
14
14
  - React
@@ -17,178 +17,137 @@ slugs:
17
17
  - react-i18next-vs-react-intl-vs-intlayer
18
18
  ---
19
19
 
20
- # React-Intl VS React-i18next VS Intlayer | React Internationalisierung (i18n)
20
+ # react-Intl VS react-i18next VS Intlayer | React Internationalisierung (i18n)
21
21
 
22
- Nachfolgend finden Sie einen prägnanten Vergleich von drei beliebten i18n (Internationalisierungs-) Bibliotheken für React: **React-Intl**, **React-i18next** und **Intlayer**. Jede Bibliothek bietet einzigartige Funktionen und Arbeitsabläufe zur Integration von mehrsprachiger Unterstützung in Ihre React-Anwendung. Nach dem Lesen sollten Sie in der Lage sein zu entscheiden, welche Lösung am besten zu Ihren Bedürfnissen passt.
22
+ Dieser Leitfaden vergleicht drei etablierte i18n-Optionen für **React**: **react-intl** (FormatJS), **react-i18next** (i18next) und **Intlayer**.
23
+ Wir konzentrieren uns auf **reine React**-Anwendungen (z. B. Vite, CRA, SPA). Wenn Sie Next.js verwenden, sehen Sie unseren speziellen Next.js-Vergleich.
23
24
 
24
- ---
25
-
26
- ## 1. Einführung
27
-
28
- Internationalisierung (i18n) in React-Anwendungen kann auf verschiedene Weisen erreicht werden. Die drei hier vorgestellten Bibliotheken haben unterschiedliche Entwurfsphilosophien, Funktionen und Community-Unterstützung:
25
+ Wir bewerten:
29
26
 
30
- 1. **React-Intl**
31
- 2. **React-i18next**
32
- 3. **Intlayer**
27
+ - Architektur & Inhaltsorganisation
28
+ - TypeScript & Sicherheit
29
+ - Umgang mit fehlenden Übersetzungen
30
+ - Umfangreiche Inhalts- & Formatierungsfunktionen
31
+ - Leistung & Ladeverhalten
32
+ - Entwicklererfahrung (DX), Tools & Wartung
33
+ - SEO/Routing (frameworkabhängig)
33
34
 
34
- Unten finden Sie eine Übersicht über jede Lösung, gefolgt von einem Funktionsvergleich, Vor- und Nachteilen sowie Anwendungsbeispielen.
35
+ > **Kurzfassung**: Alle drei können eine React-App lokalisieren. Wenn Sie **komponentenbezogenen Inhalt**, **strenge TypeScript-Typen**, **Build-Zeit-Prüfungen auf fehlende Schlüssel**, **baumgeschüttelte Wörterbücher** und integrierte redaktionelle Werkzeuge (Visueller Editor/CMS + optionale KI-Übersetzung) wünschen, ist **Intlayer** die vollständigste Wahl für modulare React-Codebasen.
35
36
 
36
37
  ---
37
38
 
38
- ## 2. React-Intl
39
-
40
- ### Übersicht
41
-
42
- [**React-Intl**](https://formatjs.io/docs/react-intl/) ist Teil der [FormatJS](https://formatjs.io/) Suite. Es bietet eine leistungsstarke Reihe von **APIs und Komponenten**, um die Nachrichtenformatierung, Pluralisierung, Datums-/Zeitformatierung und Zahlenformatierung zu verwalten. React-Intl wird häufig in Unternehmensanwendungen verwendet, hauptsächlich weil es Teil eines Ökosystems ist, das die Syntax und Formatierung von Nachrichten standardisiert.
43
-
44
- ### Hauptmerkmale
45
-
46
- - **ICU-Nachrichtensyntax**: Bietet eine umfassende Syntax für die Nachrichteninterpolation, Pluralisierung und mehr.
47
- - **Lokalisierte Formatierung**: Eingebaute Dienstprogramme zur Formatierung von Daten, Zeiten, Zahlen und relativen Zeiten basierend auf der Lokalisierung.
48
- - **Deklarative Komponenten**: Stellt `<FormattedMessage>`, `<FormattedNumber>`, `<FormattedDate>` usw. für eine nahtlose Verwendung in JSX zur Verfügung.
49
- - **Reiches Ökosystem**: Integriert sich gut mit den FormatJS-Tools (z. B. [babel-plugin-react-intl](https://formatjs.io/docs/tooling/babel-plugin/)) zum Extrahieren, Verwalten und Kompilieren von Nachrichten.
50
-
51
- ### Typischer Arbeitsablauf
52
-
53
- 1. **Definieren Sie Nachrichtenkataloge** (normalerweise JSON-Dateien pro Lokalisierung).
54
- 2. **Wickeln Sie Ihre App** in `<IntlProvider locale="de" messages={messages}>`.
55
- 3. **Verwenden Sie** `<FormattedMessage id="myMessage" defaultMessage="Hallo Welt" />` oder den `useIntl()` Hook, um auf Übersetzungsstrings zuzugreifen.
56
-
57
- ### Vorteile
58
-
59
- - Gut etabliert und wird in vielen Produktionsumgebungen eingesetzt.
60
- - Fortschrittliche Nachrichtenformatierung, einschließlich Pluralisierung, Geschlecht, Zeitzonen und mehr.
61
- - Starke Unterstützung durch Werkzeuge zur Extraktion und Kompilierung von Nachrichten.
62
-
63
- ### Nachteile
39
+ ## Übergeordnete Positionierung
64
40
 
65
- - Erfordert Vertrautheit mit dem **ICU-Nachrichtenformat**, das ausführlich sein kann.
66
- - Es ist nicht so einfach, dynamische oder komplexe Übersetzungen zu handhaben, die mehr als nur stringbasiert sind.
41
+ - **react-intl** - ICU-first, standardkonforme Formatierung (Datum/Zahlen/Pluralformen) mit einer ausgereiften API. Kataloge sind typischerweise zentralisiert; Schlüssel-Sicherheit und Build-Zeit-Validierung liegen größtenteils bei Ihnen.
42
+ - **react-i18next** - Extrem beliebt und flexibel; Namespaces, Detektoren und viele Plugins (ICU, Backends). Leistungsstark, aber die Konfiguration kann mit wachsendem Projektumfang umfangreich werden.
43
+ - **Intlayer** - Komponentenorientiertes Inhaltsmodell für React, **strenge TS-Typisierung**, **Build-Zeit-Prüfungen**, **Tree-Shaking**, plus **Visueller Editor/CMS** und **KI-unterstützte Übersetzungen**. Funktioniert mit React Router, Vite, CRA usw.
67
44
 
68
45
  ---
69
46
 
70
- ## 3. React-i18next
47
+ ## Funktionsmatrix (React-Fokus)
48
+
49
+ | Funktion | `react-intlayer` (Intlayer) | `react-i18next` (i18next) | `react-intl` (FormatJS) |
50
+ | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
51
+ | **Übersetzungen in der Nähe der Komponenten** | ✅ Ja, Inhalte sind mit jeder Komponente zusammengefasst | ❌ Nein | ❌ Nein |
52
+ | **TypeScript-Integration** | ✅ Fortgeschritten, automatisch generierte strenge Typen | ⚠️ Grundlegend; zusätzliche Konfiguration für Sicherheit | ✅ Gut, aber weniger streng |
53
+ | **Fehlende Übersetzungs-Erkennung** | ✅ TypeScript-Fehlerhervorhebung und Build-Zeit Fehler/Warnung | ⚠️ Meistens Fallback-Strings zur Laufzeit | ⚠️ Fallback-Strings |
54
+ | **Reicher Inhalt (JSX/Markdown/Komponenten)** | ✅ Direkte Unterstützung | ⚠️ Eingeschränkt / nur Interpolation | ⚠️ ICU-Syntax, kein echtes JSX |
55
+ | **KI-gestützte Übersetzung** | ✅ Ja, unterstützt mehrere KI-Anbieter. Nutzbar mit eigenen API-Schlüsseln. Berücksichtigt den Kontext Ihrer Anwendung und den Umfang des Inhalts | ❌ Nein | ❌ Nein |
56
+ | **Visueller Editor** | ✅ Ja, lokaler visueller Editor + optionales CMS; kann Codebasis-Inhalte auslagern; einbettbar | ❌ Nein / verfügbar über externe Lokalisierungsplattformen | ❌ Nein / verfügbar über externe Lokalisierungsplattformen |
57
+ | **Lokalisierte Routenführung** | ✅ Ja, unterstützt lokalisierte Pfade direkt (funktioniert mit Next.js & Vite) | ⚠️ Nicht eingebaut, erfordert Plugins (z.B. `next-i18next`) oder benutzerdefinierte Router-Konfiguration | ❌ Nein, nur Nachrichtenformatierung, Routing muss manuell erfolgen |
58
+ | **Dynamische Routen-Generierung** | ✅ Ja | ⚠️ Plugin/Ökosystem oder manuelle Einrichtung | ❌ Nicht bereitgestellt |
59
+ | **Pluralisierung** | ✅ Aufzählungsbasierte Muster | ✅ Konfigurierbar (Plugins wie i18next-icu) | ✅ (ICU) |
60
+ | **Formatierung (Daten, Zahlen, Währungen)** | ✅ Optimierte Formatierer (Intl im Hintergrund) | ⚠️ Über Plugins oder benutzerdefinierte Intl-Nutzung | ✅ ICU-Formatierer |
61
+ | **Inhaltsformat** | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml in Arbeit) | ⚠️ .json | ✅ .json, .js |
62
+ | **ICU-Unterstützung** | ⚠️ In Arbeit | ⚠️ Über Plugin (i18next-icu) | ✅ Ja |
63
+ | **SEO-Helfer (hreflang, Sitemap)** | ✅ Eingebaute Werkzeuge: Helfer für Sitemap, robots.txt, Metadaten | ⚠️ Community-Plugins / manuell | ❌ Nicht im Kern |
64
+ | **Ökosystem / Community** | ⚠️ Kleiner, aber schnell wachsend und reaktiv | ✅ Größte und ausgereifte | ✅ Groß |
65
+ | **Server-seitiges Rendering & Server-Komponenten** | ✅ Ja, optimiert für SSR / React Server-Komponenten | ⚠️ Unterstützt auf Seitenebene, aber t-Funktionen müssen im Komponentenbaum für untergeordnete Server-Komponenten übergeben werden | ❌ Nicht unterstützt, t-Funktionen müssen im Komponentenbaum für untergeordnete Server-Komponenten übergeben werden |
66
+ | **Tree-shaking (nur genutzte Inhalte laden)** | ✅ Ja, pro Komponente zur Build-Zeit über Babel/SWC-Plugins | ⚠️ Lädt normalerweise alles (kann mit Namespaces/Code-Splitting verbessert werden) | ⚠️ Lädt normalerweise alles |
67
+ | **Lazy Loading** | ✅ Ja, pro Sprache / pro Wörterbuch | ✅ Ja (z.B. Backends/Namespaces bei Bedarf) | ✅ Ja (aufgeteilte Sprachpakete) |
68
+ | **Bereinigung ungenutzter Inhalte** | ✅ Ja, pro Wörterbuch zur Build-Zeit | ❌ Nein, nur durch manuelle Namespace-Segmentierung | ❌ Nein, alle deklarierten Nachrichten werden gebündelt |
69
+ | **Verwaltung großer Projekte** | ✅ Fördert Modularität, geeignet für Design-Systeme | ⚠️ Benötigt gute Dateidisziplin | ⚠️ Zentrale Kataloge können sehr groß werden |
71
70
 
72
- ### Übersicht
73
-
74
- [**React-i18next**](https://react.i18next.com/) ist eine React-Erweiterung von [i18next](https://www.i18next.com/), einem der beliebtesten JavaScript-i18n-Frameworks. Es bietet **umfangreiche Funktionen** für Laufzeitübersetzungen, Lazy Loading und Spracherkennung, was es extrem flexibel für eine Vielzahl von Anwendungsfällen macht.
75
-
76
- ### Hauptmerkmale
77
-
78
- - **Flexible Übersetzungsstruktur**: Nicht an ein einzelnes Format wie ICU gebunden. Sie können Übersetzungen in JSON speichern, Interpolation, Pluralisierung usw. verwenden.
79
- - **Dynamischer Sprachwechsel**: Eingebaute Sprachdetektor-Plugins und Laufzeitaktualisierungen.
80
- - **Verschachtelte & strukturierte Übersetzungen**: Sie können Übersetzungen leicht innerhalb von JSON verschachteln.
81
- - **Umfangreiches Plugin-Ökosystem**: Für Erkennung (Browser, Pfad, Subdomain usw.), Ressourcenladen, Caching und mehr.
82
-
83
- ### Typischer Arbeitsablauf
84
-
85
- 1. **Installieren Sie `i18next` & `react-i18next`.**
86
- 2. **Konfigurieren Sie i18n**, um Übersetzungen zu laden (JSON) und die Spracherkennung oder Fallbacks einzurichten.
87
- 3. **Wickeln Sie Ihre App** in `I18nextProvider`.
88
- 4. **Verwenden Sie den `useTranslation()` Hook** oder die `<Trans>`-Komponente, um Übersetzungen anzuzeigen.
71
+ ---
89
72
 
90
- ### Vorteile
73
+ ## Tiefgehender Vergleich
91
74
 
92
- - Sehr **flexibel** und funktionsreich.
93
- - Sehr aktive Community und großes Ökosystem von Plugins.
94
- - Einfachheit des **dynamischen Ladens** von Übersetzungen (z. B. von einem Server, nach Bedarf).
75
+ ### 1) Architektur & Skalierbarkeit
95
76
 
96
- ### Nachteile
77
+ - **react-intl / react-i18next**: Die meisten Setups pflegen **zentralisierte Sprachordner** pro Sprache, manchmal aufgeteilt in **Namespaces** (i18next). Funktioniert anfangs gut, wird aber mit wachsender App zu einer gemeinsam genutzten Oberfläche.
78
+ - **Intlayer**: Fördert **pro-Komponente (oder pro-Feature) Wörterbücher**, die **direkt neben der UI** liegen, die sie bedienen. Dies sorgt für klare Verantwortlichkeiten, erleichtert die Duplizierung/Migration von Komponenten und reduziert den Schlüsselwechsel zwischen Teams. Unbenutzte Inhalte sind leichter zu erkennen und zu entfernen.
97
79
 
98
- - **Konfiguration kann ausführlich sein**, insbesondere wenn Sie fortschrittlichere Bedürfnisse haben.
99
- - Wenn Sie stark typisierte Übersetzungen bevorzugen, benötigen Sie möglicherweise zusätzliche TypeScript-Konfigurationen.
80
+ **Warum das wichtig ist:** Modularer Inhalt spiegelt modulare UI wider. Große React-Codebasen bleiben sauberer, wenn Übersetzungen bei den Komponenten leben, zu denen sie gehören.
100
81
 
101
82
  ---
102
83
 
103
- ## 4. Intlayer
84
+ ### 2) TypeScript & Sicherheit
104
85
 
105
- ### Übersicht
86
+ - **react-intl**: Solide Typisierung, aber **keine automatische Schlüsseltypisierung**; Sicherheitsmuster müssen selbst durchgesetzt werden.
87
+ - **react-i18next**: Starke Typisierung für Hooks; **strikte Schlüsseltypisierung** erfordert typischerweise zusätzliche Konfiguration oder Generatoren.
88
+ - **Intlayer**: **Generiert automatisch strenge Typen** aus Ihrem Inhalt. Die IDE-Autovervollständigung und **Kompilierzeit-Fehler** erkennen Tippfehler und fehlende Schlüssel vor der Laufzeit.
106
89
 
107
- [**Intlayer**](https://github.com/aymericzip/intlayer) ist eine neuere, Open-Source-i18n-Bibliothek, die sich auf **komponentenbasierte Inhaltsdeklarationen**, Typsicherheit und **dynamisches Routing** konzentriert. Sie ist für moderne React-Arbeitsabläufe konzipiert und unterstützt sowohl **Create React App** als auch **Vite**-Setups. Außerdem sind fortschrittliche Funktionen wie **lokalisierte Routen** und **automatisch generierte TypeScript-Typen** für Übersetzungen enthalten.
90
+ **Warum das wichtig ist:** Das Verschieben von Fehlern nach **links** (zum Build/CI) reduziert Produktionsprobleme und beschleunigt die Feedback-Schleifen für Entwickler.
108
91
 
109
- ### Hauptmerkmale
92
+ ---
110
93
 
111
- - **Deklarative Inhaltsdateien**: Jede Komponente oder jedes Modul kann seine Übersetzungen in eigenen `.content.tsx` oder `.content.json`-Dateien deklarieren, um den Inhalt in der Nähe der Nutzung zu halten.
112
- - **Eingebaute Routen & Middleware**: Optionale Module für lokalisiertes Routing (z. B. `/de/about`, `/fr/about`) und Server-Middleware zur Erkennung der Benutzersprache.
113
- - **Automatisch generierte TypeScript-Typen**: Sicherstellt Typsicherheit mit Funktionen wie Autovervollständigung und Compile-Time-Fehlererkennung.
114
- - **Dynamische & reiche Übersetzungen**: Können JSX/TSX in Übersetzungen für komplexere Anwendungsfälle (z. B. Links, kursiven Text, Icons in Übersetzungen) einbeziehen.
94
+ ### 3) Umgang mit fehlenden Übersetzungen
115
95
 
116
- ### Typischer Arbeitsablauf
96
+ - **react-intl / react-i18next**: Standardmäßig **Laufzeit-Fallbacks** (Schlüssel-Echo oder Standardsprache). Sie können Linting/Plugins hinzufügen, aber es ist nicht garantiert, dass dies beim Build passiert.
97
+ - **Intlayer**: **Build-Zeit-Erkennung** mit Warnungen oder Fehlern, wenn erforderliche Sprachen/Schlüssel fehlen.
117
98
 
118
- 1. **Installieren Sie `intlayer` und `react-intlayer`.**
119
- 2. **Erstellen Sie `intlayer.config.ts`**, um verfügbare Sprachen und die Standard-Sprache zu definieren.
120
- 3. **Verwenden Sie die Intlayer CLI** oder das Plugin, um **Inhaltsdeklarationen zu transpilen**.
121
- 4. **Wickeln Sie Ihre App** in `<IntlayerProvider>` und rufen Sie Inhalte mit `useIntlayer("keyName")` ab.
99
+ **Warum das wichtig ist:** Ein fehlschlagender CI-Prozess bei fehlenden Strings verhindert, dass „mysteriöses Englisch“ in nicht-englische UIs gelangt.
122
100
 
123
- ### Vorteile
101
+ ---
124
102
 
125
- - **TypeScript-freundlich** mit integrierter Typerzeugung und Fehlerüberprüfung.
126
- - **Reicher Inhalt** möglich (z. B. Übergeben von React-Knoten als Übersetzungen).
127
- - **Lokalisierte Routen** sofort einsatzbereit.
128
- - Integriert mit beliebten Build-Tools (CRA, Vite) für eine einfache Einrichtung.
103
+ ### 4) Reichhaltiger Inhalt & Formatierung
129
104
 
130
- ### Nachteile
105
+ - **react-intl**: Hervorragende **ICU**-Unterstützung für Pluralformen, Auswahlmöglichkeiten, Datums-/Zahlenformate und Nachrichtenkomposition. JSX kann verwendet werden, aber das mentale Modell bleibt nachrichtenorientiert.
106
+ - **react-i18next**: Flexible Interpolation und **`<Trans>`** zum Einbetten von Elementen/Komponenten; ICU ist über ein Plugin verfügbar.
107
+ - **Intlayer**: Inhaltsdateien können **reiche Knoten** (JSX/Markdown/Komponenten) und **Metadaten** enthalten. Die Formatierung verwendet intern Intl; Pluralmuster sind ergonomisch.
131
108
 
132
- - Noch **relativ neu** im Vergleich zu React-Intl oder React-i18next.
133
- - Schwerer Fokus auf den Ansatz der „komponentenbasierten Inhaltsdeklaration“ – kann eine Abweichung von typischen .json-Katalogen sein.
134
- - Kleinere Ökosystem und Community im Vergleich zu den etablierten Bibliotheken.
109
+ **Warum das wichtig ist:** Komplexe UI-Texte (Links, fettgedruckte Teile, Inline-Komponenten) sind einfacher zu handhaben, wenn die Bibliothek React-Knoten sauber unterstützt.
135
110
 
136
111
  ---
137
112
 
138
- ## 5. Funktionsvergleich
113
+ ### 5) Leistung & Ladeverhalten
114
+
115
+ - **react-intl / react-i18next**: Sie verwalten typischerweise **Katalogaufteilung** und **Lazy Loading** manuell (Namespaces/dynamische Importe). Effektiv, erfordert aber Disziplin.
116
+ - **Intlayer**: **Entfernt ungenutzte Wörterbücher** automatisch (Tree-shaking) und unterstützt **Lazy Loading pro Wörterbuch/pro Sprache** direkt out-of-the-box.
139
117
 
140
- | **Funktion** | **React-Intl** | **React-i18next** | **Intlayer** |
141
- | --------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
142
- | **Primärer Anwendungsfall** | Stringbasierte Übersetzungen, Daten-/Zahlenformatierung, ICU-Nachrichtensyntax | Vollwertige i18n mit einfachem dynamischem Wechsel, Verschachtelung, Plugin-Ökosystem | Typensichere Übersetzungen mit Fokus auf deklarativen Inhalt, lokalisierten Routen & optionaler Server-Middleware |
143
- | **Ansatz** | Nutzung von `<IntlProvider>` & FormatJS-Nachrichtenkomponenten | Nutzung von `I18nextProvider` & `useTranslation()`-Hook | Nutzung von `<IntlayerProvider>` & `useIntlayer()`-Hook mit Inhaltsdeklarationen |
144
- | **Lokalisierungsformat** | ICU-basierte Strings (JSON oder JavaScript-Kataloge) | JSON-Ressourcendateien (oder benutzerdefinierte Loader). ICU-Format optional über i18next-Plugin | `.content.[ts/js/tsx]` oder JSON-Deklarationen; kann Strings oder React-Komponenten enthalten |
145
- | **Routing** | Extern behandelt (kein integriertes lokales Routing) | Extern mit i18next-Plugins (Pfad-, Subdomainerkennung usw.) | Eingebaute Unterstützung für lokales Routing (z. B. `/de/about`, `/fr/about`), plus optionale Server-Middleware (für SSR/Vite) |
146
- | **TypeScript Unterstützung** | Gut (Typisierung für offizielle Pakete) | Gut, aber zusätzliche Konfiguration für typisierte Übersetzungen, wenn Sie strenge Überprüfungen wünschen | Hervorragend (automatisch generierte Typdefinitionen für Inhaltsschlüssel und Übersetzungen) |
147
- | **Pluralisierung & Formatierung** | Fortgeschritten: Eingebaute Daten-/Zahlenformatierung, Plural-/ Geschlechtsunterstützung | Konfigurierbare Pluralisierung. Datums-/Zeitformatierung in der Regel über externe Bibliotheken oder i18next-Plugin | Kann auf Standard-JavaScript-Intl angewiesen sein oder Logik in den Inhalten einbetten. Nicht so spezialisiert wie FormatJS, behandelt aber typische Fälle. |
148
- | **Community & Ökosystem** | Groß, Teil des FormatJS-Ökosystems | Sehr groß, sehr aktiv, viele Plugins (Erkennung, Caching, Frameworks) | Kleiner, aber wachsend; Open Source, moderner Ansatz |
149
- | **Lernkurve** | Mäßig (Lernen der ICU-Nachrichtensyntax, FormatJS-Konventionen) | Niedrig bis mäßig (gerade Nutzung, aber fortschrittliche Konfiguration kann ausführlich werden) | Mäßig (Konzept der Inhaltsdeklarationen und spezialisierte Build-Schritte) |
118
+ **Warum das wichtig ist:** Kleinere Bundles und weniger ungenutzte Strings verbessern die Start- und Navigationsleistung.
150
119
 
151
120
  ---
152
121
 
153
- ## 6. Wann man jede wählen sollte
122
+ ### 6) DX, Tooling & Wartung
154
123
 
155
- 1. **React-Intl**
124
+ - **react-intl / react-i18next**: Breites Community-Ökosystem; für redaktionelle Workflows verwendet man üblicherweise externe Lokalisierungsplattformen.
125
+ - **Intlayer**: Bietet einen **kostenlosen Visual Editor** und ein **optionales CMS** (Inhalte in Git behalten oder auslagern). Außerdem gibt es eine **VSCode-Erweiterung** für die Inhaltserstellung und **KI-unterstützte Übersetzung** mit eigenen Anbieter-Schlüsseln.
156
126
 
157
- - Sie benötigen **leistungsstarkes Formatieren** für Daten/Zeit/Zahlen und starke **ICU-Nachrichtensyntax**.
158
- - Sie bevorzugen einen „**standardsbasierten**“ Ansatz für Übersetzungen.
159
- - Sie benötigen kein lokales Routing oder stark typisierte Übersetzungsschlüssel.
127
+ **Warum das wichtig ist:** Eingebaute Werkzeuge verkürzen den Kreislauf zwischen Entwicklern und Inhaltserstellern - weniger Klebecode, weniger Abhängigkeiten von Drittanbietern.
160
128
 
161
- 2. **React-i18next**
129
+ ---
162
130
 
163
- - Sie benötigen eine **flexible, etablierte** Lösung mit **dynamischer** und **on-demand** Übersetzungsbeladung.
164
- - Sie möchten **pluginbasierte** Sprachenerkennung (z. B. von URL, Cookies, lokalem Speicher) oder fortschrittliches Caching.
165
- - Sie benötigen das größte Ökosystem, mit vielen bestehenden Integrationen für verschiedene Frameworks (Next.js, React Native usw.).
131
+ ## Wann welches wählen?
166
132
 
167
- 3. **Intlayer**
168
- - Sie möchten eine **starke TypeScript**-Integration mit _automatisch generierten Typen_, um sicherzustellen, dass Sie in der Regel keinen Übersetzungsschlüssel übersehen.
169
- - Sie bevorzugen **deklarative Inhalte** nahe der Komponente, möglicherweise mit React-Knoten oder fortgeschrittener Logik in Übersetzungen.
170
- - Sie benötigen **eingebaute lokalisiertes Routing** oder möchten es einfach in Ihr SSR oder Vite-Setup integrieren.
171
- - Sie wünschen sich einen modernen Ansatz oder möchten einfach eine einzige Bibliothek, die sowohl **Inhaltsverwaltung** (i18n) als auch **Routing** auf eine typsichere Weise abdeckt.
133
+ - **Wählen Sie react-intl**, wenn Sie eine **ICU-first** Nachrichtenformatierung mit einer einfachen, standardkonformen API wünschen und Ihr Team damit vertraut ist, Kataloge und Sicherheitsprüfungen manuell zu pflegen.
134
+ - **Wählen Sie react-i18next**, wenn Sie die **Vielfalt des i18next-Ökosystems** (Detektoren, Backends, ICU-Plugin, Integrationen) benötigen und mehr Konfiguration für mehr Flexibilität akzeptieren.
135
+ - **Wählen Sie Intlayer**, wenn Sie **komponentenbezogenen Inhalt**, **striktes TypeScript**, **Build-Zeit-Garantien**, **Tree-Shaking** und **inklusive redaktionelle Werkzeuge** schätzen besonders für **große, modulare** React-Anwendungen.
172
136
 
173
137
  ---
174
138
 
175
- ## 7. Fazit
176
-
177
- Jede Bibliothek bietet eine robuste Lösung zur Internationalisierung einer React-Anwendung:
178
-
179
- - **React-Intl** ist hervorragend in der Nachrichtenformatierung und eine beliebte Wahl für Unternehmenslösungen, die auf ICU-Nachrichtensyntax fokussiert sind.
180
- - **React-i18next** bietet eine hochflexible, plugin-gesteuerte Umgebung für fortschrittliche oder dynamische i18n-Bedürfnisse.
181
- - **Intlayer** bietet einen **modernen, stark typisierten** Ansatz, der Inhaltsdeklarationen, fortgeschrittenes lokalisierte Routing und pluginbasierte (CRA, Vite) Integrationen vereint.
139
+ ## Praktische Migrationshinweise (react-intl / react-i18next → Intlayer)
182
140
 
183
- Ihre Wahl hängt weitgehend von den Projektanforderungen, dem gewünschten Entwicklererlebnis (DX) und der Bedeutung von typisierten Übersetzungen oder fortschrittlichem Routing ab. Wenn Sie eingebaute lokalisiertes Routing und TypeScript-Integration schätzen, ist **Intlayer** möglicherweise am ansprechendsten. Wenn Sie eine bewährte Lösung mit reichhaltigem Ökosystem wünschen, ist **React-i18next** eine großartige Wahl. Für straightforwarde Anforderungen an ICU-basiertes Formatieren ist **React-Intl** eine zuverlässige Option.
141
+ - **Schrittweise migrieren**: Beginnen Sie mit einer Funktion oder Route; behalten Sie während der Umstellung die alten Kataloge parallel bei.
142
+ - **Pro-Komponenten-Wörterbücher übernehmen**: Platzieren Sie Inhalte zusammen mit den Komponenten, um die Kopplung zu reduzieren.
143
+ - **Strenge Prüfungen aktivieren**: Lassen Sie Build-Zeit-Fehler fehlende Schlüssel/Locales frühzeitig in der CI anzeigen.
144
+ - **Bundles messen**: Erwarten Sie Reduzierungen, da ungenutzte Strings entfernt werden.
184
145
 
185
146
  ---
186
147
 
187
- ### Weiterführende Literatur
148
+ ## Fazit
188
149
 
189
- - [React-Intl Dokumentation](https://formatjs.io/docs/react-intl/)
190
- - [React-i18next Dokumentation](https://react.i18next.com/)
191
- - [Intlayer + CRA Erste Schritte](#) (aus Ihrem Dokument)
192
- - [Intlayer + Vite & React Erste Schritte](#) (aus Ihrem Dokument)
150
+ Alle drei Bibliotheken lokalisieren React effektiv. Der Unterschied liegt darin, wie viel **Infrastruktur** Sie aufbauen müssen, um eine **sichere, skalierbare** Umgebung zu erreichen:
193
151
 
194
- Fühlen Sie sich frei, Ansätze zu kombinieren und anzupassen, um Ihren Anforderungen gerecht zu werden – es gibt keine „One-Size-Fits-All“-Lösung, und jede Bibliothek entwickelt sich weiter, um neue Anwendungsfälle im React-Ökosystem zu adressieren.
152
+ - Mit **Intlayer** sind **modularer Inhalt**, **strikte TS-Typisierung**, **Build-Zeit-Sicherheit**, **baumgeschüttelte Bundles** und **redaktionelle Werkzeuge** Standard - keine lästige Pflicht.
153
+ - Wenn Ihr Team **Wartbarkeit und Geschwindigkeit** in mehrsprachigen, komponentenbasierten React-Anwendungen schätzt, bietet Intlayer heute den **vollständigsten** Entwickler- und Inhaltsworkflow.
@@ -0,0 +1,268 @@
1
+ ---
2
+ createdAt: 2024-08-11
3
+ updatedAt: 2025-08-23
4
+ title: vue-i18n vs Intlayer
5
+ description: Vergleich von vue-i18n mit Intlayer für Internationalisierung (i18n) in Vue/Nuxt-Apps
6
+ keywords:
7
+ - vue-i18n
8
+ - Intlayer
9
+ - Internationalisierung
10
+ - i18n
11
+ - Blog
12
+ - Vue
13
+ - Nuxt
14
+ - JavaScript
15
+ slugs:
16
+ - blog
17
+ - vue-i18n-vs-intlayer
18
+ ---
19
+
20
+ # vue-i18n VS Intlayer | Vue Internationalisierung (i18n)
21
+
22
+ Dieser Leitfaden vergleicht zwei beliebte i18n-Optionen für **Vue 3** (und **Nuxt**): **vue-i18n** und **Intlayer**.
23
+ Wir konzentrieren uns auf moderne Vue-Tools (Vite, Composition API) und bewerten:
24
+
25
+ 1. **Architektur & Inhaltsorganisation**
26
+ 2. **TypeScript & Sicherheit**
27
+ 3. **Umgang mit fehlenden Übersetzungen**
28
+ 4. **Routing- & URL-Strategie**
29
+ 5. **Performance & Ladeverhalten**
30
+ 6. **Entwicklererfahrung (DX), Tools & Wartung**
31
+ 7. **SEO & Skalierbarkeit für große Projekte**
32
+
33
+ > **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.
34
+
35
+ ---
36
+
37
+ ## Übergeordnete Positionierung
38
+
39
+ - **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.
40
+ - **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**.
41
+
42
+ ---
43
+
44
+ ## Gegenüberstellung der Funktionen (Vue-fokussiert)
45
+
46
+ | Funktion | **Intlayer** | **vue-i18n** |
47
+ | -------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
48
+ | **Übersetzungen nahe bei den Komponenten** | ✅ Ja, Inhalt pro Komponente zusammengefasst (z.B. `MyComp.content.ts`) | ✅ Ja, über SFC-`<i18n>`-Blöcke (optional) |
49
+ | **TypeScript-Integration** | ✅ Fortgeschritten, automatisch generierte **strenge** Typen & Schlüssel-Autovervollständigung | ✅ Gute Typisierung; **strenge Schlüsselsicherheit erfordert zusätzliche Einrichtung/Disziplinen** |
50
+ | **Erkennung fehlender Übersetzungen** | ✅ **Build-Zeit** Warnungen/Fehler und TS-Anzeige | ⚠️ Laufzeit-Fallbacks/Warnungen |
51
+ | **Reicher Inhalt (Komponenten/Markdown)** | ✅ Direkte Unterstützung für reichhaltige Knoten und Markdown-Inhaltsdateien | ⚠️ Eingeschränkt (Komponenten über `<i18n-t>`, Markdown über externe Plugins) |
52
+ | **KI-gestützte Übersetzung** | ✅ Eingebaute Workflows mit eigenen KI-Anbieterschlüsseln | ❌ Nicht eingebaut |
53
+ | **Visueller Editor / CMS** | ✅ Kostenloser visueller Editor & optionales CMS | ❌ Nicht eingebaut (externe Plattformen verwenden) |
54
+ | **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) |
55
+ | **Dynamische Routen-Generierung** | ✅ Ja | ❌ Nicht bereitgestellt (wird von Nuxt i18n bereitgestellt) |
56
+ | **Pluralisierung & Formatierung** | ✅ Aufzählungsmuster; Intl-basierte Formatierer | ✅ ICU-Stil Nachrichten; Intl Formatierer |
57
+ | **Inhaltsformate** | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML in Arbeit) | ✅ `.json`, `.js` (plus SFC `<i18n>`-Blöcke) |
58
+ | **ICU-Unterstützung** | ⚠️ In Arbeit | ✅ Ja |
59
+ | **SEO-Helfer (Sitemap, Robots, Metadaten)** | ✅ Eingebaute Helfer (framework-unabhängig) | ❌ Nicht im Kern enthalten (Nuxt i18n/Gemeinschaft) |
60
+ | **SSR/SSG** | ✅ Funktioniert mit Vue SSR und Nuxt; blockiert kein statisches Rendering | ✅ Funktioniert mit Vue SSR/Nuxt |
61
+ | **Tree-shaking (nur genutzte Inhalte ausliefern)** | ✅ Pro Komponente zur Build-Zeit | ⚠️ Teilweise; erfordert manuelles Code-Splitting/async Nachrichten |
62
+ | **Lazy Loading** | ✅ Pro Locale / pro Wörterbuch | ✅ Async Locale-Nachrichten werden unterstützt |
63
+ | **Unbenutzte Inhalte entfernen** | ✅ Ja (zur Build-Zeit) | ❌ Nicht integriert |
64
+ | **Wartbarkeit bei großen Projekten** | ✅ Fördert modulare, designsystemfreundliche Struktur | ✅ Möglich, erfordert jedoch strenge Datei-/Namespace-Disziplin |
65
+ | **Ökosystem / Community** | ⚠️ Kleiner, aber schnell wachsend | ✅ Groß und ausgereift im Vue-Ökosystem |
66
+
67
+ ---
68
+
69
+ ## Tiefgehender Vergleich
70
+
71
+ ### 1) Architektur & Skalierbarkeit
72
+
73
+ - **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.
74
+ - **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.
75
+
76
+ **Warum das wichtig ist:** In großen Vue-Anwendungen oder Designsystemen skaliert **modularer Inhalt** besser als monolithische Kataloge.
77
+
78
+ ---
79
+
80
+ ### 2) TypeScript & Sicherheit
81
+
82
+ - **vue-i18n**: Gute TS-Unterstützung; **strikte Schlüsseltypisierung** erfordert typischerweise benutzerdefinierte Schemata/Generics und sorgfältige Konventionen.
83
+ - **Intlayer**: **Erzeugt strenge Typen** aus deinen Inhalten, bietet **IDE-Autovervollständigung** und **Kompilierzeit-Fehler** bei Tippfehlern oder fehlenden Schlüsseln.
84
+
85
+ **Warum das wichtig ist:** Starke Typisierung erkennt Probleme **vor** der Laufzeit.
86
+
87
+ ---
88
+
89
+ ### 3) Umgang mit fehlenden Übersetzungen
90
+
91
+ - **vue-i18n**: **Laufzeit**-Warnungen/Fallbacks (z.B. Rückfall auf Locale oder Schlüssel).
92
+ - **Intlayer**: **Buildzeit**-Erkennung mit Warnungen/Fehlern über alle Locales und Schlüssel hinweg.
93
+
94
+ **Warum das wichtig ist:** Durchsetzung zur Buildzeit hält die Produktions-UI sauber und konsistent.
95
+
96
+ ---
97
+
98
+ ### 4) Routing- & URL-Strategie (Vue Router/Nuxt)
99
+
100
+ - **Beide** können mit lokalisierten Routen arbeiten.
101
+ - **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.
102
+
103
+ **Warum das wichtig ist:** Weniger individuelle Verbindungs-Schichten und **saubereres SEO** über verschiedene Sprachen hinweg.
104
+
105
+ ---
106
+
107
+ ### 5) Leistung & Ladeverhalten
108
+
109
+ - **vue-i18n**: Unterstützt asynchrone Locale-Nachrichten; das Vermeiden von Über-Bundling liegt bei dir (Kataloge sorgfältig aufteilen).
110
+ - **Intlayer**: **Tree-shaking** zur Build-Zeit und **Lazy-Loading pro Wörterbuch/Locale**. Unbenutzte Inhalte werden nicht ausgeliefert.
111
+
112
+ **Warum das wichtig ist:** Kleinere Bundles und schnellerer Start für mehrsprachige Vue-Anwendungen.
113
+
114
+ ---
115
+
116
+ ### 6) Entwicklererfahrung & Werkzeuge
117
+
118
+ - **vue-i18n**: Ausgereifte Dokumentation und Community; in der Regel verlassen Sie sich auf **externe Lokalisierungsplattformen** für redaktionelle Workflows.
119
+ - **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.
120
+
121
+ **Warum das wichtig ist:** Geringere Betriebskosten und eine kürzere Entwicklungs-Content-Schleife.
122
+
123
+ ---
124
+
125
+ ### 7) SEO, SSR & SSG
126
+
127
+ - **Beide** funktionieren mit Vue SSR und Nuxt.
128
+ - **Intlayer**: Fügt **SEO-Hilfsmittel** hinzu (Sitemaps/Metadaten/`hreflang`), die frameworkunabhängig sind und gut mit Vue/Nuxt-Builds zusammenarbeiten.
129
+
130
+ **Warum das wichtig ist:** Internationale SEO ohne maßgeschneiderte Verkabelung.
131
+
132
+ ---
133
+
134
+ ## Warum Intlayer? (Problem & Ansatz)
135
+
136
+ Die meisten i18n-Stacks (einschließlich **vue-i18n**) starten mit **zentralisierten Katalogen**:
137
+
138
+ ```bash
139
+ .
140
+ ├── locales
141
+ │ ├── en.json
142
+ │ ├── es.json
143
+ │ └── fr.json
144
+ └── src
145
+ └── components
146
+ └── MyComponent.vue
147
+ ```
148
+
149
+ Oder mit pro-Locale-Ordnern:
150
+
151
+ ```bash
152
+ .
153
+ ├── locales
154
+ │ ├── en
155
+ │ │ ├── footer.json
156
+ │ │ └── navbar.json
157
+ │ ├── fr
158
+ │ │ ├── footer.json
159
+ │ │ └── navbar.json
160
+ │ └── es
161
+ │ ├── footer.json
162
+ │ └── navbar.json
163
+ └── src
164
+ └── components
165
+ └── MyComponent.vue
166
+ ```
167
+
168
+ Dies verlangsamt die Entwicklung oft, wenn Anwendungen wachsen:
169
+
170
+ 1. **Für eine neue Komponente** erstellen/bearbeiten Sie entfernte Kataloge, verbinden Namespaces und übersetzen (oft durch manuelles Kopieren/Einfügen aus KI-Tools).
171
+ 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.
172
+
173
+ **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:
174
+
175
+ ```bash
176
+ .
177
+ └── components
178
+ └── MyComponent
179
+ ├── MyComponent.content.ts
180
+ └── MyComponent.vue
181
+ ```
182
+
183
+ **Inhaltsdeklaration** (pro Komponente):
184
+
185
+ ```ts fileName="./components/MyComponent/MyComponent.content.ts"
186
+ import { t, type Dictionary } from "intlayer";
187
+
188
+ const componentExampleContent = {
189
+ key: "component-example",
190
+ content: {
191
+ greeting: t({
192
+ en: "Hello World",
193
+ es: "Hola Mundo",
194
+ fr: "Bonjour le monde",
195
+ }),
196
+ },
197
+ } satisfies Dictionary;
198
+
199
+ export default componentExampleContent;
200
+ ```
201
+
202
+ **Verwendung in Vue** (Composition API):
203
+
204
+ ```vue fileName="./components/MyComponent/MyComponent.vue"
205
+ <script setup lang="ts">
206
+ import { useIntlayer } from "vue-intlayer"; // Vue-Integration
207
+ const { greeting } = useIntlayer("component-example");
208
+ </script>
209
+
210
+ <template>
211
+ <span>{{ greeting }}</span>
212
+ </template>
213
+ ```
214
+
215
+ Dieser Ansatz:
216
+
217
+ - **Beschleunigt die Entwicklung** (einmal deklarieren; IDE/AI vervollständigt automatisch).
218
+ - **Bereinigt den Codebestand** (1 Komponente = 1 Wörterbuch).
219
+ - **Erleichtert Duplikation/Migration** (kopiere eine Komponente und deren Inhalt zusammen).
220
+ - **Vermeidet tote Schlüssel** (ungenutzte Komponenten importieren keinen Inhalt).
221
+ - **Optimiert das Laden** (lazy-geladene Komponenten bringen ihren Inhalt mit).
222
+
223
+ ---
224
+
225
+ ## Zusätzliche Funktionen von Intlayer (Vue-relevant)
226
+
227
+ - **Framework-übergreifende Unterstützung**: Funktioniert mit Vue, Nuxt, Vite, React, Express und mehr.
228
+ - **JavaScript-gesteuertes Content-Management**: Deklaration im Code mit voller Flexibilität.
229
+ - **Pro-Locale-Deklarationsdatei**: Säen Sie alle Sprachen und lassen Sie die Tools den Rest generieren.
230
+ - **Typensicheres Umfeld**: Starke TS-Konfiguration mit Autovervollständigung.
231
+ - **Vereinfachte Inhaltsabfrage**: Ein einziger Hook/Composable, um alle Inhalte für ein Wörterbuch abzurufen.
232
+ - **Organisierter Codebasis**: 1 Komponente = 1 Wörterbuch im selben Ordner.
233
+ - **Erweiterte Routing-Funktionen**: Helfer für **Vue Router/Nuxt** lokalisierte Pfade und Metadaten.
234
+ - **Markdown-Unterstützung**: Importieren Sie remote/lokales Markdown pro Sprache; stellen Sie Frontmatter dem Code zur Verfügung.
235
+ - **Kostenloser visueller Editor & optionales CMS**: Erstellung ohne kostenpflichtige Lokalisierungsplattform; Git-freundliche Synchronisation.
236
+ - **Tree-shakable Inhalte**: Liefert nur das, was verwendet wird; unterstützt Lazy Loading.
237
+ - **SSG-freundlich**: Blockiert das statische Rendering nicht.
238
+ - **KI-gestützte Übersetzungen**: Übersetzen Sie in 231 Sprachen mit Ihrem eigenen KI-Anbieter/API-Schlüssel.
239
+ - **MCP-Server & VSCode-Erweiterung**: Automatisieren Sie i18n-Workflows und das Verfassen direkt in Ihrer IDE.
240
+ - **Interoperabilität**: Verbindet bei Bedarf mit **vue-i18n**, **react-i18next** und **react-intl**.
241
+
242
+ ---
243
+
244
+ ## Wann welches wählen?
245
+
246
+ - **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).
247
+ - **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**.
248
+
249
+ ---
250
+
251
+ ## Praktische Migrationshinweise (vue-i18n → Intlayer)
252
+
253
+ - **Pro Funktion starten**: Verschieben Sie eine Route/Ansicht/Komponente nach der anderen in lokale Intlayer-Wörterbücher.
254
+ - **Brücke während der Migration**: Behalten Sie die vue-i18n-Kataloge parallel bei; ersetzen Sie die Abfragen schrittweise.
255
+ - **Strenge Prüfungen aktivieren**: Lassen Sie fehlende Schlüssel/Locales frühzeitig zur Build-Zeit erkennen.
256
+ - **Router/SEO-Hilfen übernehmen**: Standardisieren Sie die Lokalerkennung und `hreflang`-Tags.
257
+ - **Bundles messen**: Erwarten Sie **Reduzierungen der Bundle-Größe**, da ungenutzte Inhalte ausgeschlossen werden.
258
+
259
+ ---
260
+
261
+ ## Fazit
262
+
263
+ 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:
264
+
265
+ - Mit **Intlayer** sind **modularer Inhalt**, **striktes TypeScript**, **Build-Zeit-Sicherheit**, **baumgeschüttelte Bundles** sowie **Router-/SEO-/Editor-Tools** **standardmäßig enthalten**.
266
+ - Wenn Ihr Team **Wartbarkeit und Geschwindigkeit** in einer mehrsprachigen, komponentenbasierten Vue/Nuxt-Anwendung priorisiert, bietet Intlayer heute die **vollständigste** Erfahrung.
267
+
268
+ Siehe das Dokument ['Warum Intlayer?'](https://intlayer.org/doc/why) für weitere Details.
@@ -1,6 +1,6 @@
1
1
  ---
2
- createdAt: 2024-08-11
3
- updatedAt: 2025-06-29
2
+ createdAt: 2025-08-23
3
+ updatedAt: 2025-08-23
4
4
  title: Intlayer and next-i18next
5
5
  description: Integrate Intlayer with next-i18next for a Next.js app
6
6
  keywords: