@intlayer/docs 7.0.4 → 7.0.6

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 (145) hide show
  1. package/blog/ar/intlayer_with_i18next.md +72 -19
  2. package/blog/ar/intlayer_with_next-i18next.md +61 -36
  3. package/blog/ar/intlayer_with_next-intl.md +61 -13
  4. package/blog/ar/intlayer_with_react-i18next.md +67 -18
  5. package/blog/ar/intlayer_with_react-intl.md +66 -13
  6. package/blog/ar/intlayer_with_vue-i18n.md +180 -0
  7. package/blog/de/intlayer_with_i18next.md +61 -26
  8. package/blog/de/intlayer_with_next-i18next.md +66 -17
  9. package/blog/de/intlayer_with_next-intl.md +62 -13
  10. package/blog/de/intlayer_with_react-i18next.md +66 -17
  11. package/blog/de/intlayer_with_react-intl.md +66 -14
  12. package/blog/de/intlayer_with_vue-i18n.md +178 -0
  13. package/blog/en/intlayer_with_i18next.md +53 -2
  14. package/blog/en/intlayer_with_next-i18next.md +52 -16
  15. package/blog/en/intlayer_with_next-intl.md +49 -0
  16. package/blog/en/intlayer_with_react-i18next.md +50 -1
  17. package/blog/en/intlayer_with_react-intl.md +53 -0
  18. package/blog/en/intlayer_with_vue-i18n.md +178 -0
  19. package/blog/en-GB/intlayer_with_i18next.md +58 -7
  20. package/blog/en-GB/intlayer_with_next-i18next.md +55 -9
  21. package/blog/en-GB/intlayer_with_next-intl.md +55 -6
  22. package/blog/en-GB/intlayer_with_react-i18next.md +55 -6
  23. package/blog/en-GB/intlayer_with_react-intl.md +56 -3
  24. package/blog/en-GB/intlayer_with_vue-i18n.md +180 -0
  25. package/blog/es/intlayer_with_i18next.md +69 -18
  26. package/blog/es/intlayer_with_next-i18next.md +70 -24
  27. package/blog/es/intlayer_with_next-intl.md +64 -13
  28. package/blog/es/intlayer_with_react-i18next.md +61 -12
  29. package/blog/es/intlayer_with_react-intl.md +65 -12
  30. package/blog/es/intlayer_with_vue-i18n.md +178 -0
  31. package/blog/fr/intlayer_with_i18next.md +77 -16
  32. package/blog/fr/intlayer_with_next-i18next.md +55 -31
  33. package/blog/fr/intlayer_with_next-intl.md +57 -7
  34. package/blog/fr/intlayer_with_react-i18next.md +64 -7
  35. package/blog/fr/intlayer_with_react-intl.md +63 -10
  36. package/blog/fr/intlayer_with_vue-i18n.md +178 -0
  37. package/blog/hi/intlayer_with_i18next.md +67 -16
  38. package/blog/hi/intlayer_with_next-i18next.md +69 -23
  39. package/blog/hi/intlayer_with_next-intl.md +61 -8
  40. package/blog/hi/intlayer_with_react-i18next.md +63 -14
  41. package/blog/hi/intlayer_with_react-intl.md +66 -13
  42. package/blog/hi/intlayer_with_vue-i18n.md +180 -0
  43. package/blog/id/intlayer_with_i18next.md +65 -14
  44. package/blog/id/intlayer_with_next-i18next.md +58 -12
  45. package/blog/id/intlayer_with_next-intl.md +60 -11
  46. package/blog/id/intlayer_with_react-i18next.md +59 -10
  47. package/blog/id/intlayer_with_react-intl.md +66 -13
  48. package/blog/id/intlayer_with_vue-i18n.md +178 -0
  49. package/blog/it/intlayer_with_i18next.md +70 -19
  50. package/blog/it/intlayer_with_next-i18next.md +68 -22
  51. package/blog/it/intlayer_with_next-intl.md +62 -12
  52. package/blog/it/intlayer_with_react-i18next.md +65 -16
  53. package/blog/it/intlayer_with_react-intl.md +67 -14
  54. package/blog/it/intlayer_with_vue-i18n.md +178 -0
  55. package/blog/ja/intlayer_with_i18next.md +74 -24
  56. package/blog/ja/intlayer_with_next-i18next.md +60 -37
  57. package/blog/ja/intlayer_with_next-intl.md +63 -15
  58. package/blog/ja/intlayer_with_react-i18next.md +70 -21
  59. package/blog/ja/intlayer_with_react-intl.md +73 -21
  60. package/blog/ja/intlayer_with_vue-i18n.md +180 -0
  61. package/blog/ko/intlayer_with_i18next.md +60 -29
  62. package/blog/ko/intlayer_with_next-i18next.md +59 -32
  63. package/blog/ko/intlayer_with_next-intl.md +52 -23
  64. package/blog/ko/intlayer_with_react-i18next.md +65 -16
  65. package/blog/ko/intlayer_with_react-intl.md +74 -22
  66. package/blog/ko/intlayer_with_vue-i18n.md +180 -0
  67. package/blog/pl/intlayer_with_i18next.md +63 -12
  68. package/blog/pl/intlayer_with_next-i18next.md +74 -17
  69. package/blog/pl/intlayer_with_next-intl.md +59 -8
  70. package/blog/pl/intlayer_with_react-i18next.md +59 -10
  71. package/blog/pl/intlayer_with_react-intl.md +65 -12
  72. package/blog/pl/intlayer_with_vue-i18n.md +180 -0
  73. package/blog/pt/intlayer_with_i18next.md +67 -16
  74. package/blog/pt/intlayer_with_next-i18next.md +65 -19
  75. package/blog/pt/intlayer_with_next-intl.md +62 -12
  76. package/blog/pt/intlayer_with_react-i18next.md +67 -18
  77. package/blog/pt/intlayer_with_react-intl.md +62 -10
  78. package/blog/pt/intlayer_with_vue-i18n.md +178 -0
  79. package/blog/ru/intlayer_with_i18next.md +68 -15
  80. package/blog/ru/intlayer_with_next-i18next.md +71 -25
  81. package/blog/ru/intlayer_with_next-intl.md +56 -7
  82. package/blog/ru/intlayer_with_react-i18next.md +65 -16
  83. package/blog/ru/intlayer_with_react-intl.md +69 -16
  84. package/blog/ru/intlayer_with_vue-i18n.md +180 -0
  85. package/blog/tr/intlayer_with_i18next.md +67 -16
  86. package/blog/tr/intlayer_with_next-i18next.md +78 -21
  87. package/blog/tr/intlayer_with_next-intl.md +69 -18
  88. package/blog/tr/intlayer_with_react-i18next.md +65 -16
  89. package/blog/tr/intlayer_with_react-intl.md +71 -19
  90. package/blog/tr/intlayer_with_vue-i18n.md +180 -0
  91. package/blog/vi/intlayer_with_i18next.md +64 -13
  92. package/blog/vi/intlayer_with_next-i18next.md +72 -26
  93. package/blog/vi/intlayer_with_next-intl.md +62 -11
  94. package/blog/vi/intlayer_with_react-i18next.md +66 -17
  95. package/blog/vi/intlayer_with_react-intl.md +70 -17
  96. package/blog/vi/intlayer_with_vue-i18n.md +180 -0
  97. package/blog/zh/intlayer_with_i18next.md +67 -17
  98. package/blog/zh/intlayer_with_next-i18next.md +67 -22
  99. package/blog/zh/intlayer_with_next-intl.md +61 -13
  100. package/blog/zh/intlayer_with_react-i18next.md +67 -18
  101. package/blog/zh/intlayer_with_react-intl.md +69 -17
  102. package/blog/zh/intlayer_with_vue-i18n.md +180 -0
  103. package/dist/cjs/generated/blog.entry.cjs +19 -0
  104. package/dist/cjs/generated/blog.entry.cjs.map +1 -1
  105. package/dist/esm/generated/blog.entry.mjs +19 -0
  106. package/dist/esm/generated/blog.entry.mjs.map +1 -1
  107. package/dist/types/generated/blog.entry.d.ts +1 -0
  108. package/dist/types/generated/blog.entry.d.ts.map +1 -1
  109. package/docs/ar/intlayer_with_nextjs_15.md +36 -9
  110. package/docs/ar/intlayer_with_nextjs_16.md +36 -9
  111. package/docs/de/intlayer_with_nextjs_15.md +36 -9
  112. package/docs/de/intlayer_with_nextjs_16.md +24 -6
  113. package/docs/en/intlayer_with_nextjs_14.md +37 -9
  114. package/docs/en/intlayer_with_nextjs_15.md +40 -10
  115. package/docs/en/intlayer_with_nextjs_16.md +40 -10
  116. package/docs/en/plugins/sync-json.md +152 -55
  117. package/docs/en/releases/v7.md +1 -1
  118. package/docs/en-GB/intlayer_with_nextjs_15.md +36 -9
  119. package/docs/en-GB/intlayer_with_nextjs_16.md +36 -9
  120. package/docs/en-GB/releases/v7.md +1 -1
  121. package/docs/es/intlayer_with_nextjs_15.md +36 -9
  122. package/docs/es/intlayer_with_nextjs_16.md +36 -9
  123. package/docs/fr/intlayer_with_nextjs_15.md +36 -9
  124. package/docs/fr/intlayer_with_nextjs_16.md +37 -24
  125. package/docs/hi/intlayer_with_nextjs_15.md +36 -9
  126. package/docs/hi/intlayer_with_nextjs_16.md +36 -9
  127. package/docs/id/intlayer_with_nextjs_16.md +36 -9
  128. package/docs/it/intlayer_with_nextjs_15.md +36 -9
  129. package/docs/it/intlayer_with_nextjs_16.md +36 -9
  130. package/docs/ja/intlayer_with_nextjs_15.md +36 -9
  131. package/docs/ja/intlayer_with_nextjs_16.md +36 -9
  132. package/docs/ko/intlayer_with_nextjs_15.md +36 -9
  133. package/docs/ko/intlayer_with_nextjs_16.md +36 -9
  134. package/docs/pl/intlayer_with_nextjs_16.md +36 -9
  135. package/docs/pt/intlayer_with_nextjs_15.md +36 -9
  136. package/docs/pt/intlayer_with_nextjs_16.md +36 -9
  137. package/docs/ru/intlayer_with_nextjs_15.md +36 -9
  138. package/docs/ru/intlayer_with_nextjs_16.md +36 -9
  139. package/docs/tr/intlayer_with_nextjs_15.md +36 -9
  140. package/docs/tr/intlayer_with_nextjs_16.md +39 -21
  141. package/docs/vi/intlayer_with_nextjs_16.md +36 -9
  142. package/docs/zh/intlayer_with_nextjs_15.md +36 -9
  143. package/docs/zh/intlayer_with_nextjs_16.md +36 -9
  144. package/package.json +14 -14
  145. package/src/generated/blog.entry.ts +19 -0
@@ -18,9 +18,12 @@ slugs:
18
18
  - blog
19
19
  - intlayer-with-react-i18next
20
20
  history:
21
+ - version: 7.0.6
22
+ date: 2025-11-01
23
+ changes: Añadir plugin loadJSON
21
24
  - version: 7.0.0
22
25
  date: 2025-10-29
23
- changes: Cambio al plugin syncJSON
26
+ changes: Cambiar a plugin syncJSON
24
27
  ---
25
28
 
26
29
  # Cómo automatizar tus traducciones JSON de react-i18next usando Intlayer
@@ -35,11 +38,12 @@ Consulta una comparación concreta con react-i18next en nuestro artículo del bl
35
38
 
36
39
  Aunque Intlayer proporciona una excelente solución i18n independiente (consulta nuestra [guía de integración con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md)), es posible que desees combinarlo con react-i18next por varias razones:
37
40
 
38
- 1. **Base de código existente**: Tienes una implementación establecida de react-i18next y quieres migrar gradualmente a la mejor experiencia de desarrollo que ofrece Intlayer.
41
+ 1. **Código existente**: Tienes una implementación establecida de react-i18next y deseas migrar gradualmente a la mejor experiencia de desarrollo de Intlayer.
39
42
  2. **Requisitos heredados**: Tu proyecto requiere compatibilidad con plugins o flujos de trabajo existentes de react-i18next.
40
- 3. **Familiaridad del equipo**: Tu equipo está cómodo con react-i18next pero desea una mejor gestión del contenido.
43
+ 3. **Familiaridad del equipo**: Tu equipo está cómodo con react-i18next pero quiere una mejor gestión de contenido.
44
+ 4. **Uso de funciones de Intlayer**: Quieres usar funciones de Intlayer como la declaración de contenido, automatización de traducciones, pruebas de traducciones y más.
41
45
 
42
- **Para ello, Intlayer puede implementarse como un adaptador para react-i18next que ayude a automatizar tus traducciones JSON en la línea de comandos o en pipelines CI/CD, probar tus traducciones y más.**
46
+ **Para ello, Intlayer puede implementarse como un adaptador para react-i18next que ayuda a automatizar tus traducciones JSON en la CLI o en pipelines CI/CD, probar tus traducciones y más.**
43
47
 
44
48
  Esta guía te muestra cómo aprovechar el sistema superior de declaración de contenido de Intlayer mientras mantienes la compatibilidad con react-i18next.
45
49
 
@@ -65,14 +69,18 @@ pnpm add intlayer @intlayer/sync-json-plugin
65
69
  yarn add intlayer @intlayer/sync-json-plugin
66
70
  ```
67
71
 
72
+ ```bash packageManager="bun"
73
+ bun add intlayer @intlayer/sync-json-plugin
74
+ ```
75
+
68
76
  **Descripción de los paquetes:**
69
77
 
70
78
  - **intlayer**: Biblioteca principal para la gestión de internacionalización, declaración de contenido y construcción
71
- - **@intlayer/sync-json-plugin**: Plugin para exportar declaraciones de contenido de Intlayer a un formato JSON compatible con react-i18next
79
+ - **@intlayer/sync-json-plugin**: Plugin para exportar las declaraciones de contenido de Intlayer a un formato JSON compatible con react-i18next
72
80
 
73
81
  ### Paso 2: Implementar el plugin de Intlayer para envolver el JSON
74
82
 
75
- Crea un archivo de configuración de Intlayer para definir los locales que soportas:
83
+ Crea un archivo de configuración de Intlayer para definir tus locales soportados:
76
84
 
77
85
  **Si también quieres exportar diccionarios JSON para react-i18next**, añade el plugin `syncJSON`:
78
86
 
@@ -87,7 +95,7 @@ const config: IntlayerConfig = {
87
95
  },
88
96
  plugins: [
89
97
  syncJSON({
90
- source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
98
+ source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
91
99
  }),
92
100
  ],
93
101
  };
@@ -97,14 +105,55 @@ export default config;
97
105
 
98
106
  El plugin `syncJSON` envolverá automáticamente el JSON. Leerá y escribirá los archivos JSON sin cambiar la arquitectura del contenido.
99
107
 
100
- Si deseas hacer coexistir ese JSON con los archivos de declaración de contenido de intlayer (`.content`), Intlayer procederá de la siguiente manera:
108
+ Si deseas hacer coexistir ese JSON con los archivos de declaración de contenido de Intlayer (`.content` files), Intlayer procederá de la siguiente manera:
101
109
 
102
- 1. cargar tanto los archivos JSON como los archivos de declaración de contenido y transformarlos en un diccionario de intlayer.
110
+ 1. cargará tanto los archivos JSON como los archivos de declaración de contenido y los transformará en un diccionario de Intlayer.
103
111
  2. si hay conflictos entre el JSON y los archivos de declaración de contenido, Intlayer procederá a fusionar todos esos diccionarios. Dependiendo de la prioridad de los plugins y la del archivo de declaración de contenido (todos son configurables).
104
112
 
105
113
  Si se realizan cambios usando la CLI para traducir el JSON, o usando el CMS, Intlayer actualizará el archivo JSON con las nuevas traducciones.
106
114
 
107
- Para ver más detalles sobre el plugin `syncJSON`, por favor consulte la [documentación del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md).
115
+ Para ver más detalles sobre el plugin `syncJSON`, por favor consulta la [documentación del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md).
116
+
117
+ ### (Opcional) Paso 3: Implementar traducciones JSON por componente
118
+
119
+ Por defecto, Intlayer cargará, fusionará y sincronizará tanto los archivos JSON como los archivos de declaración de contenido. Consulta [la documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md) para más detalles. Pero si prefieres, usando un plugin de Intlayer, también puedes implementar la gestión por componente de JSON localizado en cualquier parte de tu base de código.
120
+
121
+ Para ello, puedes usar el plugin `loadJSON`.
122
+
123
+ ```ts fileName="intlayer.config.ts"
124
+ import { Locales, type IntlayerConfig } from "intlayer";
125
+ import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
126
+
127
+ const config: IntlayerConfig = {
128
+ internationalization: {
129
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
130
+ defaultLocale: Locales.ENGLISH,
131
+ },
132
+
133
+ // Mantén tus archivos JSON actuales sincronizados con los diccionarios de Intlayer
134
+ plugins: [
135
+ /**
136
+ * Cargará todos los archivos JSON en src que coincidan con el patrón {key}.i18n.json
137
+ */
138
+ loadJSON({
139
+ source: ({ key }) => `./src/**/${key}.i18n.json`,
140
+ locale: Locales.ENGLISH,
141
+ priority: 1, // Asegura que estos archivos JSON tengan prioridad sobre los archivos en `./locales/en/${key}.json`
142
+ }),
143
+ /**
144
+ * Cargará y escribirá la salida y las traducciones de vuelta a los archivos JSON en el directorio locales
145
+ */
146
+ syncJSON({
147
+ source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
148
+ priority: 0,
149
+ }),
150
+ ],
151
+ };
152
+
153
+ export default config;
154
+ ```
155
+
156
+ Esto cargará todos los archivos JSON en el directorio `src` que coincidan con el patrón `{key}.i18n.json` y los cargará como diccionarios de Intlayer.
108
157
 
109
158
  ## Configuración de Git
110
159
 
@@ -115,10 +164,10 @@ Se recomienda ignorar los archivos generados automáticamente por Intlayer:
115
164
  .intlayer
116
165
  ```
117
166
 
118
- Estos archivos pueden ser regenerados durante su proceso de compilación y no necesitan ser comprometidos en el control de versiones.
167
+ Estos archivos pueden regenerarse durante tu proceso de compilación y no necesitan ser comprometidos en el control de versiones.
119
168
 
120
169
  ### Extensión de VS Code
121
170
 
122
- Para mejorar la experiencia del desarrollador, instale la extensión oficial **Intlayer VS Code Extension**:
171
+ Para mejorar la experiencia del desarrollador, instala la extensión oficial **Intlayer VS Code Extension**:
123
172
 
124
173
  [Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
@@ -16,13 +16,20 @@ slugs:
16
16
  - blog
17
17
  - intlayer-with-react-intl
18
18
  history:
19
+ - version: 7.0.6
20
+ date: 2025-11-01
21
+ changes: Añadir plugin loadJSON
19
22
  - version: 7.0.0
20
23
  date: 2025-10-29
21
- changes: Cambio al plugin syncJSON
24
+ changes: Cambiar a plugin syncJSON
22
25
  ---
23
26
 
24
27
  # Cómo automatizar tus traducciones JSON de react-intl usando Intlayer
25
28
 
29
+ ## Tabla de Contenidos
30
+
31
+ <TOC/>
32
+
26
33
  ## ¿Qué es Intlayer?
27
34
 
28
35
  **Intlayer** es una biblioteca innovadora y de código abierto para la internacionalización, diseñada para abordar las limitaciones de las soluciones i18n tradicionales. Ofrece un enfoque moderno para la gestión de contenido en aplicaciones React.
@@ -31,13 +38,14 @@ Consulta una comparación concreta con react-intl en nuestro artículo del blog
31
38
 
32
39
  ## ¿Por qué combinar Intlayer con react-intl?
33
40
 
34
- Aunque Intlayer proporciona una excelente solución i18n independiente (consulta nuestra [guía de integración con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md)), es posible que desees combinarlo con react-intl por varias razones:
41
+ Aunque Intlayer ofrece una excelente solución i18n independiente (consulta nuestra [guía de integración con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md)), es posible que desees combinarlo con react-intl por varias razones:
35
42
 
36
43
  1. **Código existente**: Tienes una implementación establecida de react-intl y deseas migrar gradualmente a la mejorada experiencia de desarrollador de Intlayer.
37
- 2. **Requisitos heredados**: Tu proyecto requiere compatibilidad con plugins o flujos de trabajo existentes de react-intl.
44
+ 2. **Requisitos heredados**: Tu proyecto requiere compatibilidad con los plugins o flujos de trabajo existentes de react-intl.
38
45
  3. **Familiaridad del equipo**: Tu equipo está cómodo con react-intl pero quiere una mejor gestión de contenido.
46
+ 4. **Uso de las características de Intlayer**: Quieres usar características de Intlayer como la declaración de contenido, automatización de traducciones, pruebas de traducciones y más.
39
47
 
40
- **Para ello, Intlayer puede implementarse como un adaptador para react-intl que ayude a automatizar tus traducciones JSON en CLI o pipelines CI/CD, probar tus traducciones y más.**
48
+ **Para ello, Intlayer puede implementarse como un adaptador para react-intl que ayude a automatizar tus traducciones JSON en la CLI o en pipelines CI/CD, probar tus traducciones y más.**
41
49
 
42
50
  Esta guía te muestra cómo aprovechar el sistema superior de declaración de contenido de Intlayer mientras mantienes la compatibilidad con react-intl.
43
51
 
@@ -63,14 +71,18 @@ pnpm add intlayer @intlayer/sync-json-plugin
63
71
  yarn add intlayer @intlayer/sync-json-plugin
64
72
  ```
65
73
 
74
+ ```bash packageManager="bun"
75
+ bun add intlayer @intlayer/sync-json-plugin
76
+ ```
77
+
66
78
  **Descripción de los paquetes:**
67
79
 
68
80
  - **intlayer**: Biblioteca principal para la gestión de internacionalización, declaración de contenido y construcción
69
- - **@intlayer/sync-json-plugin**: Plugin para exportar declaraciones de contenido de Intlayer a un formato JSON compatible con react-intl
81
+ - **@intlayer/sync-json-plugin**: Plugin para exportar las declaraciones de contenido de Intlayer a un formato JSON compatible con react-intl
70
82
 
71
83
  ### Paso 2: Implementar el plugin de Intlayer para envolver el JSON
72
84
 
73
- Crea un archivo de configuración de Intlayer para definir los locales que soportas:
85
+ Crea un archivo de configuración de Intlayer para definir tus locales soportados:
74
86
 
75
87
  **Si también quieres exportar diccionarios JSON para react-intl**, añade el plugin `syncJSON`:
76
88
 
@@ -95,14 +107,55 @@ export default config;
95
107
 
96
108
  El plugin `syncJSON` envolverá automáticamente el JSON. Leerá y escribirá los archivos JSON sin cambiar la arquitectura del contenido.
97
109
 
98
- Si deseas hacer coexistir ese JSON con los archivos de declaración de contenido de Intlayer (`.content`), Intlayer procederá de la siguiente manera:
110
+ Si deseas hacer coexistir ese JSON con los archivos de declaración de contenido de Intlayer (archivos `.content`), Intlayer procederá de la siguiente manera:
99
111
 
100
- 1. cargar tanto los archivos JSON como los archivos de declaración de contenido y transformarlos en un diccionario de Intlayer.
101
- 2. si hay conflictos entre los archivos JSON y los archivos de declaración de contenido, Intlayer procederá a fusionar todos esos diccionarios. Dependiendo de la prioridad de los plugins y la del archivo de declaración de contenido (todos son configurables).
112
+ 1. cargará tanto los archivos JSON como los archivos de declaración de contenido y los transformará en un diccionario de Intlayer.
113
+ 2. si hay conflictos entre el JSON y los archivos de declaración de contenido, Intlayer procederá a fusionar todos esos diccionarios. Dependiendo de la prioridad de los plugins y la del archivo de declaración de contenido (todos son configurables).
102
114
 
103
115
  Si se realizan cambios usando la CLI para traducir el JSON, o usando el CMS, Intlayer actualizará el archivo JSON con las nuevas traducciones.
104
116
 
105
- Para ver más detalles sobre el plugin `syncJSON`, por favor consulte la [documentación del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md).
117
+ Para ver más detalles sobre el plugin `syncJSON`, por favor consulta la [documentación del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md).
118
+
119
+ ### (Opcional) Paso 3: Implementar traducciones JSON por componente
120
+
121
+ Por defecto, Intlayer cargará, combinará y sincronizará tanto los archivos JSON como los archivos de declaración de contenido. Consulta [la documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md) para más detalles. Pero si prefieres, usando un plugin de Intlayer, también puedes implementar la gestión por componente de JSON localizado en cualquier parte de tu base de código.
122
+
123
+ Para ello, puedes usar el plugin `loadJSON`.
124
+
125
+ ```ts fileName="intlayer.config.ts"
126
+ import { Locales, type IntlayerConfig } from "intlayer";
127
+ import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
128
+
129
+ const config: IntlayerConfig = {
130
+ internationalization: {
131
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
132
+ defaultLocale: Locales.ENGLISH,
133
+ },
134
+
135
+ // Mantén tus archivos JSON actuales sincronizados con los diccionarios de Intlayer
136
+ plugins: [
137
+ /**
138
+ * Cargará todos los archivos JSON en src que coincidan con el patrón {key}.i18n.json
139
+ */
140
+ loadJSON({
141
+ source: ({ key }) => `./src/**/${key}.i18n.json`,
142
+ locale: Locales.ENGLISH,
143
+ priority: 1, // Asegura que estos archivos JSON tengan prioridad sobre los archivos en `./locales/en/${key}.json`
144
+ }),
145
+ /**
146
+ * Cargará y escribirá la salida y las traducciones de vuelta a los archivos JSON en el directorio locales
147
+ */
148
+ syncJSON({
149
+ source: ({ key, locale }) => `./messages/${locale}/${key}.json`,
150
+ priority: 0,
151
+ }),
152
+ ],
153
+ };
154
+
155
+ export default config;
156
+ ```
157
+
158
+ Esto cargará todos los archivos JSON en el directorio `src` que coincidan con el patrón `{key}.i18n.json` y los cargará como diccionarios de Intlayer.
106
159
 
107
160
  ## Configuración de Git
108
161
 
@@ -113,10 +166,10 @@ Se recomienda ignorar los archivos generados automáticamente por Intlayer:
113
166
  .intlayer
114
167
  ```
115
168
 
116
- Estos archivos pueden ser regenerados durante su proceso de compilación y no necesitan ser comprometidos en el control de versiones.
169
+ Estos archivos pueden ser regenerados durante tu proceso de compilación y no necesitan ser comprometidos en el control de versiones.
117
170
 
118
171
  ### Extensión de VS Code
119
172
 
120
- Para mejorar la experiencia del desarrollador, instale la **Extensión oficial de Intlayer para VS Code**:
173
+ Para mejorar la experiencia del desarrollador, instala la extensión oficial **Intlayer VS Code Extension**:
121
174
 
122
175
  [Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
@@ -0,0 +1,178 @@
1
+ ---
2
+ createdAt: 2025-08-23
3
+ updatedAt: 2025-10-29
4
+ title: Intlayer y vue-i18n
5
+ description: Integra Intlayer con vue-i18n para una solución integral de internacionalización en Vue.js
6
+ keywords:
7
+ - vue-i18n
8
+ - Intlayer
9
+ - Internacionalización
10
+ - Blog
11
+ - Vue.js
12
+ - Nuxt
13
+ - JavaScript
14
+ - Vue
15
+ slugs:
16
+ - blog
17
+ - intlayer-with-vue-i18n
18
+ history:
19
+ - version: 7.0.6
20
+ date: 2025-11-01
21
+ changes: Añadir plugin loadJSON
22
+ - version: 7.0.0
23
+ date: 2025-10-29
24
+ changes: Cambio a plugin syncJSON y reescritura completa
25
+ ---
26
+
27
+ # Internacionalización (i18n) en Vue.js con vue-i18n e Intlayer
28
+
29
+ ## Tabla de Contenidos
30
+
31
+ <TOC/>
32
+
33
+ ## ¿Qué es Intlayer?
34
+
35
+ **Intlayer** es una biblioteca innovadora y de código abierto para la internacionalización, diseñada para abordar las limitaciones de las soluciones i18n tradicionales. Ofrece un enfoque moderno para la gestión de contenido en aplicaciones Vue.js y Nuxt.
36
+
37
+ Consulta una comparación concreta con vue-i18n en nuestro artículo del blog [vue-i18n vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/vue-i18n_vs_intlayer.md).
38
+
39
+ ## ¿Por qué combinar Intlayer con vue-i18n?
40
+
41
+ Aunque Intlayer ofrece una excelente solución i18n independiente (consulta nuestra [guía de integración con Vue.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+vue.md)), es posible que desees combinarlo con vue-i18n por varias razones:
42
+
43
+ 1. **Código existente**: Tienes una implementación establecida de vue-i18n y deseas migrar gradualmente a la mejor experiencia de desarrollo que ofrece Intlayer.
44
+ 2. **Requisitos heredados**: Tu proyecto requiere compatibilidad con los plugins o flujos de trabajo existentes de vue-i18n.
45
+ 3. **Familiaridad del equipo**: Tu equipo está familiarizado con vue-i18n pero desea una mejor gestión de contenido.
46
+ 4. **Uso de funciones de Intlayer**: Quieres utilizar funciones de Intlayer como la declaración de contenido, automatización de traducciones, pruebas de traducciones y más.
47
+
48
+ **Para ello, Intlayer puede implementarse como un adaptador para vue-i18n que ayuda a automatizar tus traducciones JSON en la CLI o en pipelines CI/CD, probar tus traducciones y más.**
49
+
50
+ Esta guía te muestra cómo aprovechar el sistema superior de declaración de contenido de Intlayer mientras mantienes la compatibilidad con vue-i18n.
51
+
52
+ ---
53
+
54
+ ## Guía paso a paso para configurar Intlayer con vue-i18n
55
+
56
+ ### Paso 1: Instalar dependencias
57
+
58
+ Instala los paquetes necesarios usando tu gestor de paquetes preferido:
59
+
60
+ ```bash packageManager="npm"
61
+ npm install intlayer @intlayer/sync-json-plugin
62
+ ```
63
+
64
+ ```bash packageManager="pnpm"
65
+ pnpm add intlayer @intlayer/sync-json-plugin
66
+ ```
67
+
68
+ ```bash packageManager="yarn"
69
+ yarn add intlayer @intlayer/sync-json-plugin
70
+ ```
71
+
72
+ ```bash packageManager="bun"
73
+ bun add intlayer @intlayer/sync-json-plugin
74
+ ```
75
+
76
+ **Explicación de los paquetes:**
77
+
78
+ - **intlayer**: Biblioteca principal para la declaración y gestión de contenido
79
+ - **@intlayer/sync-json-plugin**: Plugin para sincronizar las declaraciones de contenido de Intlayer al formato JSON de vue-i18n
80
+
81
+ ### Paso 2: Implementar el plugin de Intlayer para envolver el JSON
82
+
83
+ Crea un archivo de configuración de Intlayer para definir tus locales soportados:
84
+
85
+ **Si también quieres exportar diccionarios JSON para vue-i18n**, añade el plugin `syncJSON`:
86
+
87
+ ```typescript fileName="intlayer.config.ts"
88
+ import { Locales, type IntlayerConfig } from "intlayer";
89
+ import { syncJSON } from "@intlayer/sync-json-plugin";
90
+
91
+ const config: IntlayerConfig = {
92
+ internationalization: {
93
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
94
+ defaultLocale: Locales.ENGLISH,
95
+ },
96
+ plugins: [
97
+ syncJSON({
98
+ source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
99
+ }),
100
+ ],
101
+ };
102
+
103
+ export default config;
104
+ ```
105
+
106
+ El plugin `syncJSON` envolverá automáticamente el JSON. Leerá y escribirá los archivos JSON sin cambiar la arquitectura del contenido.
107
+
108
+ Si deseas hacer coexistir ese JSON con los archivos de declaración de contenido de Intlayer (archivos `.content`), Intlayer procederá de la siguiente manera:
109
+
110
+ 1. cargar ambos archivos, JSON y de declaración de contenido, y transformarlos en un diccionario de Intlayer.
111
+ 2. si hay conflictos entre el JSON y los archivos de declaración de contenido, Intlayer procederá a fusionar todos esos diccionarios. Dependiendo de la prioridad de los plugins y la del archivo de declaración de contenido (todos son configurables).
112
+
113
+ Si se realizan cambios usando la CLI para traducir el JSON, o usando el CMS, Intlayer actualizará el archivo JSON con las nuevas traducciones.
114
+
115
+ Para ver más detalles sobre el plugin `syncJSON`, por favor consulta la [documentación del plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md).
116
+
117
+ ---
118
+
119
+ ### (Opcional) Paso 3: Implementar traducciones JSON por componente
120
+
121
+ Por defecto, Intlayer cargará, combinará y sincronizará tanto los archivos JSON como los archivos de declaración de contenido. Consulta [la documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md) para más detalles. Pero si prefieres, usando un plugin de Intlayer, también puedes implementar la gestión por componente de JSON localizado en cualquier parte de tu base de código.
122
+
123
+ Para ello, puedes usar el plugin `loadJSON`.
124
+
125
+ ```ts fileName="intlayer.config.ts"
126
+ import { Locales, type IntlayerConfig } from "intlayer";
127
+ import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
128
+
129
+ const config: IntlayerConfig = {
130
+ internationalization: {
131
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
132
+ defaultLocale: Locales.ENGLISH,
133
+ },
134
+
135
+ // Mantén tus archivos JSON actuales sincronizados con los diccionarios de Intlayer
136
+ plugins: [
137
+ /**
138
+ * Cargará todos los archivos JSON en src que coincidan con el patrón {key}.i18n.json
139
+ */
140
+ loadJSON({
141
+ source: ({ key }) => `./src/**/${key}.i18n.json`,
142
+ locale: Locales.ENGLISH,
143
+ priority: 1, // Asegura que estos archivos JSON tengan prioridad sobre los archivos en `./locales/en/${key}.json`
144
+ }),
145
+ /**
146
+ * Cargará y escribirá la salida y las traducciones de vuelta en los archivos JSON en el directorio locales
147
+ */
148
+ syncJSON({
149
+ source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
150
+ priority: 0,
151
+ }),
152
+ ],
153
+ };
154
+
155
+ export default config;
156
+ ```
157
+
158
+ Esto cargará todos los archivos JSON en el directorio `src` que coincidan con el patrón `{key}.i18n.json` y los cargará como diccionarios de Intlayer.
159
+
160
+ ---
161
+
162
+ ## Configuración de Git
163
+
164
+ Excluye los archivos generados del control de versiones:
165
+
166
+ ```plaintext fileName=".gitignore"
167
+ # Ignorar archivos generados por Intlayer
168
+ .intlayer
169
+ intl
170
+ ```
171
+
172
+ Estos archivos se regeneran automáticamente durante el proceso de compilación y no necesitan ser comprometidos en tu repositorio.
173
+
174
+ ### Extensión de VS Code
175
+
176
+ Para mejorar la experiencia del desarrollador, instala la extensión oficial **Intlayer VS Code Extension**:
177
+
178
+ [Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  createdAt: 2024-12-24
3
- updatedAt: 2025-10-29
3
+ updatedAt: 2025-11-01
4
4
  title: Comment automatiser vos traductions JSON i18next avec Intlayer
5
5
  description: Automatisez vos traductions JSON avec Intlayer et i18next pour une internationalisation améliorée dans les applications JavaScript.
6
6
  keywords:
@@ -20,6 +20,9 @@ slugs:
20
20
  - blog
21
21
  - intlayer-with-i18next
22
22
  history:
23
+ - version: 7.0.6
24
+ date: 2025-11-01
25
+ changes: Ajout du plugin loadJSON
23
26
  - version: 7.0.0
24
27
  date: 2025-10-29
25
28
  changes: Passage au plugin syncJSON
@@ -29,21 +32,30 @@ history:
29
32
 
30
33
  ## Qu'est-ce que Intlayer ?
31
34
 
32
- **Intlayer** est une bibliothèque dinternationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle offre une approche moderne de la gestion de contenu dans les applications JavaScript.
35
+ **Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les limites des solutions i18n traditionnelles. Elle offre une approche moderne de la gestion de contenu dans les applications JavaScript.
36
+
37
+ Découvrez une comparaison concrète avec i18next dans notre article de blog [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md).
38
+
39
+ ## Pourquoi combiner Intlayer avec i18next ?
40
+
41
+ Alors qu'Intlayer fournit une excellente solution i18n autonome (voir notre [guide d'intégration Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_16.md)), vous pourriez vouloir le combiner avec i18next pour plusieurs raisons :
42
+
43
+ **Intlayer** est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les lacunes des solutions i18n traditionnelles. Elle offre une approche moderne de la gestion de contenu dans les applications JavaScript.
33
44
 
34
45
  Consultez une comparaison concrète avec i18next dans notre article de blog [next-i18next vs. next-intl vs. Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md).
35
46
 
36
47
  ## Pourquoi combiner Intlayer avec i18next ?
37
48
 
38
- Bien quIntlayer fournisse une excellente solution i18n autonome (voir notre [guide dintégration Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_16.md)), vous pourriez vouloir le combiner avec i18next pour plusieurs raisons :
49
+ Bien qu'Intlayer fournisse une excellente solution i18n autonome (voir notre [guide d'intégration Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_16.md)), vous pourriez vouloir le combiner avec i18next pour plusieurs raisons :
39
50
 
40
- 1. **Base de code existante** : Vous disposez dune implémentation i18next établie et souhaitez migrer progressivement vers la meilleure expérience développeur dIntlayer.
41
- 2. **Contraintes héritées** : Votre projet nécessite une compatibilité avec des plugins ou des workflows i18next existants.
42
- 3. **Familiarité de l’équipe** : Votre équipe est à laise avec i18next mais souhaite une meilleure gestion du contenu.
51
+ 1. **Base de code existante** : Vous disposez d'une implémentation i18next établie et souhaitez migrer progressivement vers la meilleure expérience développeur d'Intlayer.
52
+ 2. **Exigences héritées** : Votre projet nécessite une compatibilité avec les plugins ou workflows i18next existants.
53
+ 3. **Familiarité de l'équipe** : Votre équipe est à l'aise avec i18next mais souhaite une meilleure gestion du contenu.
54
+ 4. **Utilisation des fonctionnalités d'Intlayer** : Vous souhaitez utiliser les fonctionnalités d'Intlayer telles que la déclaration de contenu, la gestion des clés de traduction, le statut des traductions, et plus encore.
43
55
 
44
- **Pour cela, Intlayer peut être implémenté comme un adaptateur pour i18next afin dautomatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et plus encore.**
56
+ **Pour cela, Intlayer peut être implémenté comme un adaptateur pour i18next afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et bien plus.**
45
57
 
46
- Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu dIntlayer tout en maintenant la compatibilité avec i18next.
58
+ Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu d'Intlayer tout en maintenant la compatibilité avec i18next.
47
59
 
48
60
  ## Table des matières
49
61
 
@@ -53,7 +65,7 @@ Ce guide vous montre comment tirer parti du système supérieur de déclaration
53
65
 
54
66
  ### Étape 1 : Installer les dépendances
55
67
 
56
- Installez les paquets nécessaires :
68
+ Installez les packages nécessaires :
57
69
 
58
70
  ```bash packageManager="npm"
59
71
  npm install intlayer @intlayer/sync-json-plugin
@@ -67,10 +79,14 @@ pnpm add intlayer @intlayer/sync-json-plugin
67
79
  yarn add intlayer @intlayer/sync-json-plugin
68
80
  ```
69
81
 
70
- **Descriptions des paquets :**
82
+ ```bash packageManager="bun"
83
+ bun add intlayer @intlayer/sync-json-plugin
84
+ ```
85
+
86
+ **Descriptions des packages :**
71
87
 
72
- - **intlayer** : Bibliothèque principale pour la gestion de l'internationalisation, la déclaration de contenu et la construction
73
- - **@intlayer/sync-json-plugin** : Plugin pour exporter les déclarations de contenu Intlayer au format JSON compatible i18next
88
+ - **intlayer** : Bibliothèque principale pour la gestion de l'internationalisation, la déclaration de contenu et la compilation
89
+ - **@intlayer/sync-json-plugin** : Plugin pour exporter les déclarations de contenu Intlayer au format JSON compatible avec i18next
74
90
 
75
91
  ### Étape 2 : Implémenter le plugin Intlayer pour envelopper le JSON
76
92
 
@@ -89,7 +105,7 @@ const config: IntlayerConfig = {
89
105
  },
90
106
  plugins: [
91
107
  syncJSON({
92
- source: ({ key, locale }) => `./intl/messages/${locale}/${key}.json`,
108
+ source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
93
109
  }),
94
110
  ],
95
111
  };
@@ -97,15 +113,60 @@ const config: IntlayerConfig = {
97
113
  export default config;
98
114
  ```
99
115
 
100
- Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans modifier l'architecture du contenu.
116
+ Le plugin `syncJSON` enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans changer l'architecture du contenu.
101
117
 
102
- Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu intlayer (`.content`), Intlayer procédera de la manière suivante :
118
+ Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu intlayer (`.content` files), Intlayer procédera de la manière suivante :
103
119
 
104
120
  1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu et les transformer en un dictionnaire intlayer.
105
- 2. s'il y a des conflits entre les fichiers JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle du fichier de déclaration de contenu (tout est configurable).
121
+ 2. s'il y a des conflits entre le JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle du fichier de déclaration de contenu (tout est configurable).
106
122
 
107
123
  Si des modifications sont effectuées via la CLI pour traduire le JSON, ou en utilisant le CMS, Intlayer mettra à jour le fichier JSON avec les nouvelles traductions.
108
124
 
125
+ Pour plus de détails sur le plugin `syncJSON`, veuillez consulter la [documentation du plugin syncJSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-json.md).
126
+
127
+ ### (Optionnel) Étape 3 : Implémenter les traductions JSON par composant
128
+
129
+ Par défaut, Intlayer chargera, fusionnera et synchronisera à la fois les fichiers JSON et les fichiers de déclaration de contenu. Voir [la documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md) pour plus de détails. Mais si vous préférez, en utilisant un plugin Intlayer, vous pouvez également implémenter une gestion par composant des JSON localisés n'importe où dans votre base de code.
130
+
131
+ Pour cela, vous pouvez utiliser le plugin `loadJSON`.
132
+
133
+ ```ts fileName="intlayer.config.ts"
134
+ import { Locales, type IntlayerConfig } from "intlayer";
135
+ import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
136
+
137
+ const config: IntlayerConfig = {
138
+ internationalization: {
139
+ locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
140
+ defaultLocale: Locales.ENGLISH,
141
+ },
142
+
143
+ // Gardez vos fichiers JSON actuels synchronisés avec les dictionnaires Intlayer
144
+ plugins: [
145
+ /**
146
+ * Chargera tous les fichiers JSON dans src qui correspondent au modèle {key}.i18n.json
147
+ */
148
+ loadJSON({
149
+ source: ({ key }) => `./src/**/${key}.i18n.json`,
150
+ locale: Locales.ENGLISH,
151
+ priority: 1, // Assure que ces fichiers JSON ont la priorité sur les fichiers dans `./locales/en/${key}.json`
152
+ }),
153
+ /**
154
+ * Chargera, puis écrira la sortie et les traductions dans les fichiers JSON du répertoire locales
155
+ */
156
+ syncJSON({
157
+ source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
158
+ priority: 0,
159
+ }),
160
+ ],
161
+ };
162
+
163
+ export default config;
164
+ ```
165
+
166
+ Cela chargera tous les fichiers JSON dans le répertoire `src` qui correspondent au modèle `{key}.i18n.json` et les chargera en tant que dictionnaires Intlayer.
167
+
168
+ ---
169
+
109
170
  ## Configuration Git
110
171
 
111
172
  Il est recommandé d'ignorer les fichiers Intlayer générés automatiquement :