@intlayer/docs 9.5.5 → 9.5.7

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

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-13
-updatedAt: 2026-09-13
+updatedAt: 2026-09-22
 title: "vue-i18n vs @intlayer/vue-i18n: Misma API, Bundle Diferente"
 description: Qué cambia cuando una aplicación Vue 3 mantiene sus llamadas vue-i18n pero las sirve a través del adaptador de compatibilidad @intlayer/vue-i18n. JavaScript por página, tamaño en tiempo de ejecución, tamaño de componente y fugas medidas en el mismo código Vite + Vue, además de lo que el adaptador mantiene, ignora y no puede reemplazar.
 keywords:
@@ -25,6 +25,8 @@ author: aymericzip
 
 # vue-i18n VS @intlayer/vue-i18n | Misma API, Bundle Diferente
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 `@intlayer/vue-i18n` es un adaptador de compatibilidad: expone la API de `vue-i18n` (`createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t`, `v-t`, `i18n.global.locale`...) y la sirve desde diccionarios compilados por Intlayer. Tus archivos `.vue` no cambian. Lo que `t("footer.github")` está vinculado sí lo hace.
 
 Este artículo mide ese cambio en la misma aplicación Vite + Vue 3, construida una vez con `vue-i18n` y otra con el adaptador. Los números provienen de [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Para comparar `vue-i18n` e Intlayer como librerías, lee [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) y el [benchmark de vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark). Este trata sobre qué cambia el adaptador cuando mantienes tus componentes como están.
@@ -105,6 +107,10 @@ Para cada compilación, el suite registra:
 
 ### Resultados en Vite + Vue 3
 
+Selecciona las métricas y las bibliotecas que te interesen:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
 | Setup                    | Strategy | Lib size (gz) | Lib size (min) | Page JS avg (gz) | Locale leak | Page leak | Component avg (gz) | E2E reactivity |  Page load |
 | ------------------------ | -------- | ------------: | -------------: | ---------------: | ----------: | --------: | -----------------: | -------------: | ---------: |
 | **base** (no i18n)       | -        |        0.0 KB |         0.0 KB |          41.3 KB |        0.0% |         - |             1.1 KB |         1.8 ms |    10.8 ms |
@@ -124,11 +130,24 @@ Para cada compilación, el suite registra:
 - **Reactividad y carga de página.** El cambio de locale es económico para ambos (1.5-2.8 ms); el sistema de reactividad de Vue lo hace posible una vez que los mensajes están en memoria. La carga de página va de 13.6 ms a **9.3 ms**, en línea con 88 KB menos de JavaScript para analizar.
 - **Acerca de las filas nativas.** `vue-intlayer` en esta ejecución agrupó cada locale en modo `static` y llegó a 57.1 KB con un runtime de 3.9 KB; los diccionarios sincronizados del adaptador llevaban menos strings de locales extranjeros, de ahí la cifra más baja por página. El runtime nativo sigue siendo el más ligero de los tres, y su modelo `.content.ts` es donde los bloques `<i18n>` de SFC encuentran su equivalente.
 
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tabla completa, cada biblioteca y cada estrategia, en el [informe de benchmark de Vue](https://intlayer.org/es/doc/benchmark/vue).
+
 ## Por qué se mueven los números
 
+![The Intlayer compiler extracts content from components](https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.webp?raw=true)
+
 Nada en `src/components/` cambió, así que las ganancias provienen de a qué está vinculado `useI18n`.
 
-**Con `vue-i18n`**, el binding es la instancia global. `createI18n({ messages: { en, fr, ... } })` es una importación que contiene todo; cada componente que llama a `useI18n()` puede acceder a todo, por lo que el bundler no puede dividir por debajo de la instancia. Optimizar significa que _tú_ divides `en.json` por ruta, llamas a `setLocaleMessage()` en un router guard, y mantienes el mapa ruta-a-archivo correcto a medida que los componentes se mueven.
+**Con `vue-i18n`**, el binding es la instancia global. `createI18n({ messages: { en, fr, ... } })` es una importación que contiene todo; cada componente que llama a `useI18n()` puede acceder a todo, por lo que el bundler no puede dividir por debajo de la instancia. Optimizar significa que _tú_ divides `en.json` por ruta, llamas a `setLocaleMessage()` en un router guard, y mantienes el mapa ruta-a-archivo correcto a medida que los componentes se mueven. El desperdicio crece en dos ejes a la vez, páginas e idiomas:
+
+![Theoretical content leakage by architecture](https://github.com/aymericzip/intlayer/blob/main/docs/assets/theorical_content_leakage.webp?raw=true)
 
 ```bash
 .
@@ -258,26 +277,107 @@ export const i18n = createI18n({ locale: "en" });
 
 ## Limitaciones que debes conocer antes de empezar
 
-- **Los bloques SFC `<i18n>` no se leen.** Si tus mensajes viven dentro de componentes, necesitan moverse a los archivos de locale (o a `.content.ts`, que es la misma idea pero con tipos).
-- **La carga de mensajes en tiempo de ejecución se ha eliminado.** `setLocaleMessage()` y `mergeLocaleMessage()` advierten y devuelven. Las traducciones obtenidas de un CMS en tiempo de ejecución necesitan el CMS de Intlayer, o los comandos `intlayer pull` / `push`.
-- **`messages` es un fallback, no gratis.** Mantener los imports de JSON en `createI18n()` mantiene los 75 KB en el bundle. Elimínalos una vez que `intlayer test` pase.
-- **El adaptador no es el runtime nativo.** 7.9 KB contra 3.9 KB para `vue-intlayer`. Una vez que cada componente haya migrado a `useIntlayer`, puedes eliminarlo.
+<AccordionGroup>
+<Accordion header="Los bloques SFC <i18n> no se leen">
+
+Si tus mensajes residen dentro de los componentes, deben trasladarse a los archivos de idioma o a un `.content.ts`, que es la misma idea con tipos generados.
+
+</Accordion>
+<Accordion header="La carga de mensajes en runtime desaparece">
+
+`setLocaleMessage()` y `mergeLocaleMessage()` muestran una advertencia y retornan. Las traducciones obtenidas de un CMS en runtime requieren el [CMS de Intlayer](https://intlayer.org/es/doc/concept/cms) o los comandos `intlayer pull` / `push`.
+
+</Accordion>
+<Accordion header="messages es un fallback, no gratuito">
+
+Mantener los imports JSON en `createI18n()` conserva los 75 KB en el bundle. Elimínalos una vez que `intlayer test` pase exitosamente.
+
+</Accordion>
+<Accordion header="El adaptador no es el runtime nativo">
+
+7.9 KB frente a 3.9 KB de `vue-intlayer`. Una vez que todos los componentes hayan pasado a `useIntlayer`, elimínalo.
+
+</Accordion>
+</AccordionGroup>
 
 ## ¿Cuándo usar cuál?
 
-- **Mantente en `vue-i18n`** si tu aplicación depende de bloques SFC `<i18n>`, de flujos de `setLocaleMessage()` en runtime, o si 90 KB por página no es una preocupación para tu audiencia.
-- **Usa `@intlayer/vue-i18n`** si estás en `vue-i18n` y deseas los 88 KB, los componentes 23x más pequeños, 0% de fuga de página, claves tipadas y verificaciones de CI sin editar un archivo `.vue`. Este es el punto de entrada para una codebase `vue-i18n` existente.
-- **Ve nativo (`vue-intlayer`)** para nuevos proyectos, o una vez que el adaptador haya cumplido su función. Tiene el runtime más ligero (3.9 KB) y el modelo `.content.ts` por componente que reemplaza los bloques `<i18n>` con contenido tipado.
+<AccordionGroup>
+<Accordion header="Quédate en vue-i18n">
+
+Tu aplicación depende de los bloques SFC `<i18n>`, de flujos de `setLocaleMessage()` en runtime, o 90 KB por página no es una preocupación para tu audiencia.
+
+</Accordion>
+<Accordion header="Usa @intlayer/vue-i18n">
+
+Estás en `vue-i18n` y quieres los 88 KB, componentes 23 veces más pequeños, 0% de fuga de páginas, claves tipadas y comprobaciones de CI sin editar un archivo `.vue`. Este es el punto de entrada para una base de código `vue-i18n` existente.
+
+</Accordion>
+<Accordion header="Pasa a nativo (vue-intlayer)">
+
+Para nuevos proyectos, o una vez que el adaptador haya cumplido su función. Tiene el runtime más ligero (3.9 KB) y el modelo `.content.ts` por componente que reemplaza los bloques `<i18n>` con contenido tipado. Comienza con [Intlayer con Vue](https://intlayer.org/es/doc/environment/vite-and-vue) o [con Nuxt](https://intlayer.org/es/doc/environment/nuxt-and-vue).
+
+</Accordion>
+</AccordionGroup>
+
+## Preguntas frecuentes
+
+<FAQ>
+
+<Question title="¿Tengo que editar mis archivos .vue?">
+
+No. La compilación del benchmark solo modificó `vite.config.ts`, `intlayer.config.ts` y una línea en `src/i18n.ts`, la importación de `messages`. Cada llamada a `useI18n()`, `$t`, `v-t` y la Options API se mantuvo como estaba.
+
+</Question>
+
+<Question title="¿Por qué el tamaño del componente es 23 veces menor?">
+
+Porque `useI18n()` deja de acceder a la instancia global. `createI18n({ messages })` contiene todos los mensajes de cada idioma, por lo que un componente compilado aisladamente arrastra 196 KB. Con el adaptador solo accede a su propio diccionario: 8.4 KB.
+
+</Question>
+
+<Question title="¿Qué sucede con el formateo de d() y n()?">
+
+Se conserva. Se respetan `datetimeFormats` y `numberFormats` pasados a `createI18n()`, respaldados por la API nativa `Intl`. Consulta [formateo de fechas, horas y números](https://intlayer.org/es/blog/date-time-number-formatting-locales).
+
+</Question>
+
+<Question title="¿Funciona con Nuxt?">
+
+`@intlayer/vue-i18n` está diseñado para Vite + Vue. Para `@nuxtjs/i18n`, usa el [adaptador de compatibilidad Nuxt i18n](https://intlayer.org/es/doc/compatibility/nuxtjs-i18n) y consulta [Intlayer con Nuxt](https://intlayer.org/es/doc/environment/nuxt-and-vue) para la configuración nativa.
+
+</Question>
+
+<Question title="¿Puedo migrar componente por componente?">
+
+Sí. Cualquier componente puede cambiar de `useI18n()` a `useIntlayer("footer")` con un archivo de contenido ubicado al lado. Los diccionarios JSON y `.content.ts` coexisten y se combinan.
+
+</Question>
+
+</FAQ>
 
 ## Comparaciones relacionadas
 
-- [vue-i18n vs Intlayer](https://intlayer.org/blog/vue-i18n-vs-intlayer) (características y DX)
-- [vue-i18n vs Intlayer benchmark](https://intlayer.org/blog/vue-i18n-vs-intlayer-benchmark) (las librerías, mismo benchmark)
-- [next-intl vs @intlayer/next-intl](https://intlayer.org/blog/next-intl-vs-intlayer-next-intl) (misma serie de adaptadores)
-- [i18next vs @intlayer/i18next](https://intlayer.org/blog/i18next-vs-intlayer-i18next) (misma serie de adaptadores)
-- [Lingui vs @intlayer/lingui](https://intlayer.org/blog/lingui-vs-intlayer-lingui) (misma serie de adaptadores)
-- [Guía de migración: vue-i18n a Intlayer](https://intlayer.org/doc/migration/vue-i18n)
-- [Referencia del adaptador de compatibilidad: vue-i18n](https://intlayer.org/doc/compatibility/vue-i18n), [Nuxt i18n](https://intlayer.org/doc/compatibility/nuxtjs-i18n)
+Misma serie de adaptadores:
+
+- [next-intl vs @intlayer/next-intl](https://intlayer.org/es/blog/next-intl-vs-intlayer-next-intl)
+- [i18next vs @intlayer/i18next](https://intlayer.org/es/blog/i18next-vs-intlayer-i18next)
+- [Lingui vs @intlayer/lingui](https://intlayer.org/es/blog/lingui-vs-intlayer-lingui)
+
+Las bibliotecas comparadas directamente:
+
+- [vue-i18n vs Intlayer](https://intlayer.org/es/blog/vue-i18n-vs-intlayer), características y DX
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/es/blog/vue-i18n-vs-intlayer-benchmark)
+- [Is vue-i18n outdated?](https://intlayer.org/es/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/es/blog/how-to-pick-vue-i18n-library)
+
+Documentación de referencia:
+
+- [Compat adapter: vue-i18n](https://intlayer.org/es/doc/compatibility/vue-i18n) and [Nuxt i18n](https://intlayer.org/es/doc/compatibility/nuxtjs-i18n)
+- [Guía de migración: vue-i18n a Intlayer](https://intlayer.org/es/doc/migration/vue-i18n)
+- [Informe de benchmark de Vue](https://intlayer.org/es/doc/benchmark/vue)
+- [Optimización del bundle](https://intlayer.org/es/doc/concept/bundle-optimization) y [el compilador Intlayer](https://intlayer.org/es/doc/compiler)
+- [Visual Editor](https://intlayer.org/es/doc/concept/editor), [CMS](https://intlayer.org/es/doc/concept/cms) y [traducción por IA](https://intlayer.org/es/doc/concept/auto-fill)
 
 ## Conclusión
 
@@ -285,4 +385,4 @@ export const i18n = createI18n({ locale: "en" });
 
 Todos los datos sin procesar, las aplicaciones de prueba y los scripts están en el [repositorio Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom). Ejecútalo tú mismo.
 
-Consulta la [documentación 'Why Intlayer?'](https://intlayer.org/doc/why) para más detalles.
+Consulta la [documentación 'Why Intlayer?'](https://intlayer.org/es/doc/why) para más detalles.

package/blog/es/vue-i18n_vs_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-08-23
+updatedAt: 2026-09-22
 title: vue-i18n vs Intlayer
 description: Comparación entre vue-i18n e Intlayer para la internacionalización (i18n) en aplicaciones Vue/Nuxt
 keywords:
@@ -20,6 +20,8 @@ author: aymericzip
 
 # vue-i18n VS Intlayer | Internacionalización (i18n) en Vue
 
+![Vue i18n library ecosystem](https://github.com/aymericzip/intlayer/blob/main/docs/assets/cloud_i18n_logo.webp?raw=true)
+
 Esta guía compara dos opciones populares de i18n para **Vue 3** (y **Nuxt**): **vue-i18n** e **Intlayer**.
 Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y evaluamos:
 
@@ -31,6 +33,8 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 6. **Experiencia del desarrollador (DX), herramientas y mantenimiento**
 7. **SEO y escalabilidad para proyectos grandes**
 
+<TOC/>
+
 > **resumen**: Ambos pueden localizar aplicaciones Vue. Si deseas **contenido con alcance por componente**, **tipos estrictos en TypeScript**, **verificaciones de claves faltantes en tiempo de compilación**, **diccionarios optimizados por tree-shaking**, y **helpers integrados para router/SEO** además de **Editor Visual y traducciones asistidas por IA**, **Intlayer** es la opción más completa y moderna.
 
 ## Posicionamiento a alto nivel
@@ -38,6 +42,30 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 - **vue-i18n** - La biblioteca de i18n por excelencia para Vue. Formateo flexible de mensajes (estilo ICU), bloques SFC `<i18n>` para mensajes locales y un gran ecosistema. La seguridad y el mantenimiento a gran escala dependen principalmente de ti.
 - **Intlayer** - Modelo de contenido centrado en componentes para Vue/Vite/Nuxt con **tipado estricto en TS**, **verificaciones en tiempo de compilación**, **tree-shaking**, **helpers para router y SEO**, **Editor Visual/CMS** opcional y **traducciones asistidas por IA**.
 
+## Lo que cuesta en tiempo de compilación
+
+Antes de las tablas de características, la parte medida. [Benchmark Bloom](https://github.com/intlayer-org/benchmark-bloom) compila la misma aplicación Vite + Vue 3 (10 páginas, 10 idiomas) con cada biblioteca y registra lo que descarga el navegador:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+| Setup                | Lib size (gz) | Page JS avg (gz) | Page leak | Component avg (gz) |
+| -------------------- | ------------: | ---------------: | --------: | -----------------: |
+| **base** (no i18n)   |        0.0 KB |          41.3 KB |         - |             1.1 KB |
+| `vue-i18n`           |       24.3 KB |         134.9 KB |     90.0% |           196.0 KB |
+| `@intlayer/vue-i18n` |        7.9 KB |          47.0 KB |      0.0% |             8.4 KB |
+| **`vue-intlayer`**   |    **3.9 KB** |      **57.1 KB** |  **0.0%** |         **7.7 KB** |
+
+El runtime de `vue-i18n` por sí solo pesa **6 veces** el de Intlayer, cada página transporta un **90% de cadenas de páginas ajenas**, y un componente compilado de forma aislada arrastra **196 KB** porque `useI18n()` lo vincula al árbol global de mensajes. La prueba completa, con tiempos de reactividad y carga de página, se encuentra en el [benchmark vue-i18n vs Intlayer](https://intlayer.org/es/blog/vue-i18n-vs-intlayer-benchmark).
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Tabla completa en el [informe de benchmark de Vue](https://intlayer.org/es/doc/benchmark/vue).
+
 ## Comparación de características lado a lado (enfocado en Vue)
 
 | Característica                                   | **Intlayer**                                                                      | **vue-i18n**                                                                                    |
@@ -63,59 +91,74 @@ Nos enfocamos en las herramientas modernas de Vue (Vite, Composition API) y eval
 
 ## Comparación en profundidad
 
-### 1) Arquitectura y escalabilidad
+<AccordionGroup>
+<Accordion header="1) Arquitectura y escalabilidad">
 
-- **vue-i18n**: Las configuraciones comunes usan **catálogos centralizados** por idioma (opcionalmente divididos en archivos/espacios de nombres). Los bloques `<i18n>` en SFC permiten mensajes locales, pero los equipos a menudo vuelven a catálogos compartidos a medida que los proyectos crecen.
+- **vue-i18n**: Las configuraciones comunes usan **catálogos centralizados** por idioma (opcionalmente divididos en archivos/espacios de nombres). Los bloques `<i18n>` en SFC permiten mensajes locales, pero los equipos a menudo vuelven a catálogos compartidos a medida que los proyectos crecen. Consulta [i18n por componente frente a centralizado](https://intlayer.org/es/blog/per-component-vs-centralized-i18n).
 - **Intlayer**: Promueve **diccionarios por componente** almacenados junto al componente al que sirven. Esto reduce conflictos entre equipos, mantiene el contenido accesible y limita naturalmente la deriva/las claves no usadas.
 
 **Por qué es importante:** En aplicaciones Vue grandes o sistemas de diseño, el **contenido modular** escala mejor que los catálogos monolíticos.
 
-### 2) TypeScript y seguridad
+</Accordion>
+<Accordion header="2) TypeScript y seguridad">
 
 - **vue-i18n**: Buen soporte para TS; la **tipificación estricta de claves** generalmente requiere esquemas/generics personalizados y convenciones cuidadosas.
 - **Intlayer**: **Genera tipos estrictos** a partir de tu contenido, proporcionando **autocompletado en el IDE** y **errores en tiempo de compilación** por errores tipográficos o claves faltantes.
 
 **Por qué es importante:** La tipificación fuerte detecta problemas **antes** de la ejecución.
 
-### 3) Manejo de traducciones faltantes
+</Accordion>
+<Accordion header="3) Manejo de traducciones faltantes">
 
-- **vue-i18n**: Advertencias y soluciones alternativas en **tiempo de ejecución** (por ejemplo, usar idioma o clave de reserva).
-- **Intlayer**: Detección en **tiempo de compilación** con advertencias/errores a través de idiomas y claves.
+- **vue-i18n**: Advertencias y soluciones alternativas en **tiempo de ejecución** (por ejemplo, usar idioma o clave de reserva). Consulta [detección de traducciones faltantes](https://intlayer.org/es/blog/detecting-missing-translations).
+- **Intlayer**: Detección en **tiempo de compilación** con advertencias/errores a través de idiomas y claves., más `npx intlayer test` en CI.
 
 **Por qué es importante:** La aplicación de reglas en tiempo de compilación mantiene la interfaz de producción limpia y consistente.
 
-### 4) Estrategia de rutas y URLs (Vue Router/Nuxt)
+</Accordion>
+<Accordion header="4) Estrategia de rutas y URLs (Vue Router/Nuxt)">
 
-- **Ambos** pueden trabajar con rutas localizadas.
+- **Ambos** pueden trabajar con rutas localizadas. Consulta la [guía de hreflang](https://intlayer.org/es/blog/hreflang-guide-multilingual-seo).
 - **Intlayer** proporciona ayudas para **generar rutas localizadas**, **gestionar prefijos de locales** y emitir **`<link rel="alternate" hreflang>`** para SEO. Con Nuxt, complementa el enrutamiento del framework.
 
 **Por qué es importante:** Menos capas personalizadas y un **SEO más limpio** entre locales.
 
-### 5) Rendimiento y comportamiento de carga
+</Accordion>
+<Accordion header="5) Rendimiento y comportamiento de carga">
 
-- **vue-i18n**: Soporta mensajes de locales asíncronos; evitar la sobrecarga de paquetes depende de ti (divide los catálogos con cuidado).
+- **vue-i18n**: Soporta mensajes de locales asíncronos; evitar la sobrecarga de paquetes depende de ti (divide los catálogos con cuidado). El benchmark anterior pone números a esto: 134.9 KB frente a 57.1 KB por página.
 - **Intlayer**: Realiza **tree-shaking** en la compilación y **carga perezosa por diccionario/locale**. El contenido no usado no se incluye.
 
 **Por qué es importante:** Paquetes más pequeños y un inicio más rápido para aplicaciones Vue multilingües.
 
-### 6) Experiencia del desarrollador y herramientas
+</Accordion>
+<Accordion header="6) Experiencia del desarrollador y herramientas">
 
 - **vue-i18n**: Documentación y comunidad maduras; normalmente dependerás de **plataformas de localización externas** para los flujos editoriales.
-- **Intlayer**: Incluye un **Editor Visual gratuito**, un **CMS** opcional (compatible con Git o externalizado), una **extensión para VSCode**, utilidades **CLI/CI**, y **traducciones asistidas por IA** usando tus propias claves de proveedor.
+- **Intlayer**: Incluye un **Editor Visual gratuito**, un **CMS** opcional (compatible con Git o externalizado), una **extensión para VSCode**, utilidades **CLI/CI**, y **traducciones asistidas por IA** usando tus propias claves de proveedor., un **servidor MCP**
 
 **Por qué importa:** Menores costos operativos y un ciclo de desarrollo–contenido más corto.
 
-### 7) SEO, SSR y SSG
+</Accordion>
+<Accordion header="7) SEO, SSR y SSG">
 
-- **Ambos** funcionan con Vue SSR y Nuxt.
+- **Ambos** funcionan con Vue SSR y Nuxt. Consulta [internacionalización y SEO](https://intlayer.org/es/blog/SEO-and-i18n).
 - **Intlayer**: Añade **ayudas SEO** (sitemaps/metadata/`hreflang`) que son independientes del framework y funcionan bien con las compilaciones de Vue/Nuxt.
 
 **Por qué importa:** SEO internacional sin configuraciones personalizadas.
 
+</Accordion>
+</AccordionGroup>
+
 ## ¿Por qué Intlayer? (Problema y enfoque)
 
+![Centralized catalogs versus per-component dictionaries](https://github.com/aymericzip/intlayer/blob/main/docs/assets/project_stucture_18n_vs_intlayer.png?raw=true)
+
 La mayoría de los stacks i18n (incluyendo **vue-i18n**) comienzan desde **catálogos centralizados**:
 
+<Tabs defaultTab="per-locale" group="catalog">
+<Tab label="Un archivo por idioma" value="per-locale">
+
 ```bash
 .
 ├── locales
@@ -127,7 +170,8 @@ La mayoría de los stacks i18n (incluyendo **vue-i18n**) comienzan desde **catá
         └── MyComponent.vue
 ```
 
-O con carpetas por idioma:
+</Tab>
+<Tab label="Una carpeta por idioma" value="per-folder">
 
 ```bash
 .
@@ -146,6 +190,34 @@ O con carpetas por idioma:
         └── MyComponent.vue
 ```
 
+</Tab>
+</Tabs>
+
+Esa carpeta sigue creciendo, un namespace por funcionalidad, en cada idioma:
+
+```txt
+locales
+├── EN
+│   ├── blog.json
+│   ├── about.json
+│   ├── auth.json
+│   ├── blog.json
+│   ├── cart.json
+│   ├── categories.json
+│   ├── contact.json
+│   ├── dashboard.json
+│   ├── errors.json
+│   ├── faq.json
+│   ├── footer.json
+│   ├── form.json
+│   ├── home.json
+│   ├── language.json
+│   ├── navbar.json
+│   ├── ... 65 files
+│   └── validation.json
+└── ES
+```
+
 Esto a menudo ralentiza el desarrollo a medida que las aplicaciones crecen:
 
 1. **Para un nuevo componente** creas/editas catálogos remotos, configuras espacios de nombres y traduces (a menudo mediante copiar/pegar manual desde herramientas de IA).
@@ -161,7 +233,33 @@ Esto a menudo ralentiza el desarrollo a medida que las aplicaciones crecen:
         └── MyComponent.vue
 ```
 
-**Declaración de contenido** (por componente):
+<Tabs defaultTab="intlayer" group="techno">
+<Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="./locales/en.json"
+{
+  "componentExample": {
+    "greeting": "Hello World"
+  }
+}
+```
+
+```vue fileName="./components/MyComponent.vue"
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <span>{{ t("componentExample.greeting") }}</span>
+</template>
+```
+
+Cada archivo de idioma debe editarse a mano, y la clave es una simple cadena de texto: una errata se muestra como `componentExample.greting` en producción.
+
+</Tab>
+<Tab label="Intlayer" value="intlayer">
 
 ```ts fileName="./components/MyComponent/myComponent.content.ts"
 import { t, type Dictionary } from "intlayer";
@@ -171,8 +269,8 @@ const componentExampleContent = {
   content: {
     greeting: t({
       en: "Hello World",
-      es: "Hola Mundo",
       fr: "Bonjour le monde",
+      es: "Hola Mundo",
     }),
   },
 } satisfies Dictionary;
@@ -180,11 +278,10 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-**Uso en Vue** (API de composición):
-
 ```vue fileName="./components/MyComponent/MyComponent.vue"
 <script setup lang="ts">
-import { useIntlayer } from "vue-intlayer"; // Integración con Vue
+import { useIntlayer } from "vue-intlayer"; // Vue integration
+
 const { greeting } = useIntlayer("component-example");
 </script>
 
@@ -193,6 +290,11 @@ const { greeting } = useIntlayer("component-example");
 </template>
 ```
 
+Todos los idiomas se encuentran en un único archivo tipado junto al componente.
+
+</Tab>
+</Tabs>
+
 Este enfoque:
 
 - **Acelera el desarrollo** (declara una vez; el IDE/IA autocompleta).
@@ -220,22 +322,71 @@ Este enfoque:
 
 ## ¿Cuándo elegir cuál?
 
-- **Elige vue-i18n** si quieres el **enfoque estándar de Vue**, te sientes cómodo gestionando catálogos/espacios de nombres tú mismo, y tu aplicación es de **tamaño pequeño a mediano** (o ya dependes de Nuxt i18n).
-- **Elige Intlayer** si valoras el **contenido con alcance por componente**, **TypeScript estricto**, **garantías en tiempo de compilación**, **tree-shaking**, y herramientas integradas para enrutamiento/SEO/editor-especialmente para **códigos grandes y modulares en Vue/Nuxt**.
+<AccordionGroup>
+<Accordion header="Elegir vue-i18n">
+
+Deseas el **enfoque estándar de Vue**, te sientes cómodo gestionando catálogos y namespaces tú mismo, y tu aplicación es de **tamaño pequeño a mediano** (o ya dependes de Nuxt i18n). Los bloques SFC `<i18n>` y `setLocaleMessage()` en runtime son características que Intlayer deliberadamente no replica.
+
+</Accordion>
+<Accordion header="Elegir Intlayer">
+
+Valoras el **contenido acotado al componente**, **TypeScript estricto**, **garantías en tiempo de compilación**, **tree-shaking** y herramientas completas para enrutamiento, SEO y edición, especialmente para **bases de código modulares grandes en Vue/Nuxt** y sistemas de diseño. Comienza con [Intlayer con Vue](https://intlayer.org/es/doc/environment/vite-and-vue) o [con Nuxt](https://intlayer.org/es/doc/environment/nuxt-and-vue).
+
+</Accordion>
+<Accordion header="Elegir @intlayer/vue-i18n">
+
+Estás en `vue-i18n` hoy y quieres las ganancias de bundle sin editar ningún archivo `.vue`. El [adaptador de compatibilidad](https://intlayer.org/es/doc/compatibility/vue-i18n) mantiene `createI18n`, `useI18n`, `t()`, `d()`, `n()`, `$t` y `v-t`, y los sirve desde diccionarios compilados. Medido lado a lado en [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/es/blog/vue-i18n-vs-intlayer-vue-i18n).
+
+</Accordion>
+</AccordionGroup>
 
 ## Interoperabilidad con vue-i18n
 
 `intlayer` también puede ayudarte a gestionar tus namespaces de `vue-i18n`.
 
-Usando `intlayer`, puedes declarar tu contenido en el formato de tu librería i18n favorita, e intlayer generará tus namespaces en la ubicación de tu elección (ejemplo: `/messages/{{locale}}/{{namespace}}.json`).
+Usando `intlayer`, puedes declarar tu contenido en el formato de tu librería i18n favorita, e intlayer generará tus namespaces en la ubicación de tu elección (ejemplo: `/messages/{{locale}}/{{namespace}}.json`). Consulta la [documentación de compatibilidad con vue-i18n](https://intlayer.org/es/doc/compatibility/vue-i18n) y el [adaptador Nuxt i18n](https://intlayer.org/es/doc/compatibility/nuxtjs-i18n).
+
+## Preguntas frecuentes
+
+<FAQ>
+
+<Question title="¿Es Intlayer un sustituto de vue-i18n o una capa superior?">
+
+Ambos, según cómo lo adoptes. `vue-intlayer` es un runtime nativo con su propio composable `useIntlayer()`. `@intlayer/vue-i18n` es un adaptador de compatibilidad que mantiene la API de `vue-i18n` y cambia a qué está vinculada, para que puedas migrar sin tocar componentes y avanzar archivo por archivo después.
+
+</Question>
+
+<Question title="¿Qué ocurre con mis bloques SFC <i18n>?">
+
+El adaptador no los lee. Mueve esos mensajes a tu JSON de idioma, o a un archivo `.content.ts` junto al componente, que es la misma idea con tipos generados. Es la única función de `vue-i18n` que no se traslada.
 
-## Notas prácticas para la migración (vue-i18n → Intlayer)
+</Question>
 
-- **Comience por función**: Mueva una ruta/vista/componente a la vez a los diccionarios locales de Intlayer.
-- **Puente durante la migración**: Mantenga los catálogos de vue-i18n en paralelo; reemplace gradualmente las búsquedas.
-- **Active verificaciones estrictas**: Permita que la detección en tiempo de compilación identifique temprano claves/idiomas faltantes.
-- **Adopte los ayudantes de router/SEO**: Estandarice la detección de idioma y las etiquetas `hreflang`.
-- **Mida los paquetes**: Espere **reducciones en el tamaño del paquete** a medida que se excluye contenido no utilizado.
+<Question title="¿Funciona Intlayer con Nuxt?">
+
+Sí. [Intlayer con Nuxt](https://intlayer.org/es/doc/environment/nuxt-and-vue) cubre enrutamiento multilingüe, middleware de detección de idioma y generación de sitemaps. Si utilizas `@nuxtjs/i18n`, el [adaptador de compatibilidad Nuxt i18n](https://intlayer.org/es/doc/compatibility/nuxtjs-i18n) es la ruta de migración.
+
+</Question>
+
+<Question title="¿Puedo mantener mis locales/{locale}.json como fuente de verdad?">
+
+Sí. El [plugin de sincronización JSON](https://intlayer.org/es/doc/compatibility/vue-i18n) los lee con el dialecto de `vue-i18n` (`{name}`, `{0}`, plurales en tubería `"car | cars"`) y vuelve a escribir las traducciones cuando la CLI o el CMS los actualiza.
+
+</Question>
+
+<Question title="¿Funciona ICU con Intlayer en Vue?">
+
+El soporte nativo para ICU está en desarrollo. El adaptador `@intlayer/vue-i18n` resuelve la sintaxis de mensajes propia de `vue-i18n`, incluidos los plurales en barra vertical y la interpolación nombrada y de listas. Para el modelo de pluralización de Intlayer, consulta el [contenido de enumeración](https://intlayer.org/es/doc/concept/content/enumeration).
+
+</Question>
+
+</FAQ>
+
+## GitHub STARs
+
+Las estrellas de GitHub son un fuerte indicador de la popularidad de un proyecto, la confianza de la comunidad y la relevancia a largo plazo. Si bien no son una medida directa de la calidad técnica, reflejan cuántos desarrolladores encuentran útil el proyecto, siguen su progreso y es probable que lo adopten. Para estimar el valor de un proyecto, las estrellas ayudan a comparar la tracción entre alternativas y brindan información sobre el crecimiento del ecosistema.
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
 
 ## Conclusión
 
@@ -244,4 +395,15 @@ Tanto **vue-i18n** como **Intlayer** localizan bien las aplicaciones Vue. La dif
 - Con **Intlayer**, el **contenido modular**, **TS estricto**, **seguridad en tiempo de compilación**, **paquetes optimizados por árbol de dependencias** y las **herramientas para router/SEO/editor** vienen **listos para usar**.
 - Si tu equipo prioriza la **mantenibilidad y velocidad** en una aplicación Vue/Nuxt multilingüe y basada en componentes, Intlayer ofrece la experiencia **más completa** hoy en día.
 
-Consulta el documento ['¿Por qué Intlayer?'](https://intlayer.org/doc/why) para más detalles.
+## Lecturas adicionales
+
+- [vue-i18n vs Intlayer benchmark](https://intlayer.org/es/blog/vue-i18n-vs-intlayer-benchmark), la prueba medida detrás de la tabla anterior
+- [vue-i18n vs @intlayer/vue-i18n](https://intlayer.org/es/blog/vue-i18n-vs-intlayer-vue-i18n), el adaptador en la misma aplicación
+- [Is vue-i18n outdated?](https://intlayer.org/es/blog/is-vue-i18n-outdated)
+- [How to pick a Vue i18n library](https://intlayer.org/es/blog/how-to-pick-vue-i18n-library)
+- [Using Intlayer with vue-i18n](https://intlayer.org/es/blog/intlayer-with-vue-i18n)
+- [Vue benchmark report](https://intlayer.org/es/doc/benchmark/vue)
+- [Migration guide: vue-i18n to Intlayer](https://intlayer.org/es/doc/migration/vue-i18n)
+- [Bundle optimization](https://intlayer.org/es/doc/concept/bundle-optimization) and [the Intlayer compiler](https://intlayer.org/es/doc/compiler)
+
+Refer to ['Why Intlayer?' doc](https://intlayer.org/es/doc/why) for more details.