Intlayer

--- createdAt: 2024-08-11 updatedAt: 2025-08-23 title: vue-i18n vs Intlayer description: Comparación entre vue-i18n e Intlayer para la internacionalización (i18n) en aplicaciones Vue/Nuxt keywords: - vue-i18n - Intlayer - Internacionalización - i18n - Blog - Vue - Nuxt - JavaScript slugs: - blog - vue-i18n-vs-intlayer --- # vue-i18n VS Intlayer | Internacionalización (i18n) en Vue 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: 1. **Arquitectura y organización del contenido** 2. **TypeScript y seguridad** 3. **Manejo de traducciones faltantes** 4. **Estrategia de enrutamiento y URLs** 5. **Rendimiento y comportamiento de carga** 6. **Experiencia del desarrollador (DX), herramientas y mantenimiento** 7. **SEO y escalabilidad para proyectos grandes** > **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 - **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**. --- ## Comparación de características lado a lado (enfocado en Vue) | Característica | **Intlayer** | **vue-i18n** | | ------------------------------------------------ | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | **Traducciones cerca de los componentes** | ✅ Sí, contenido ubicado por componente (por ejemplo, `MyComp.content.ts`) | ✅ Sí, mediante bloques `<i18n>` en SFC (opcional) | | **Integración con TypeScript** | ✅ Avanzada, tipos **estrictos** auto-generados y autocompletado de claves | ✅ Buen tipado; **la seguridad estricta de claves requiere configuración/disciplina adicional** | | **Detección de traducciones faltantes** | ✅ Advertencias/errores en **tiempo de compilación** y visibilidad en TS | ⚠️ Recaídas/advertencias en tiempo de ejecución | | **Contenido enriquecido (componentes/Markdown)** | ✅ Soporte directo para nodos enriquecidos y archivos de contenido Markdown | ⚠️ Limitado (componentes vía `<i18n-t>`, Markdown mediante plugins externos) | | **Traducción potenciada por IA** | ✅ Flujos de trabajo integrados usando tus propias claves de proveedores de IA | ❌ No integrado | | **Editor Visual / CMS** | ✅ Editor Visual gratuito y CMS opcional | ❌ No integrado (usar plataformas externas) | | **Enrutamiento localizado** | ✅ Helpers para Vue Router/Nuxt para generar rutas localizadas, URLs y `hreflang` | ⚠️ No es parte del núcleo (usar Nuxt i18n o configuración personalizada de Vue Router) | | **Generación dinámica de rutas** | ✅ Sí | ❌ No proporcionado (lo proporciona Nuxt i18n) | | **Pluralización y formateo** | ✅ Patrones de enumeración; formateadores basados en Intl | ✅ Mensajes estilo ICU; formateadores Intl | | **Formatos de contenido** | ✅ `.ts`, `.js`, `.json`, `.md`, `.txt` (YAML en desarrollo) | ✅ `.json`, `.js` (más bloques SFC `<i18n>`) | | **Soporte ICU** | ⚠️ En desarrollo | ✅ Sí | | **Helpers SEO (sitemap, robots, metadata)** | ✅ Helpers integrados (independientes del framework) | ❌ No es parte del núcleo (Nuxt i18n/comunidad) | | **SSR/SSG** | ✅ Funciona con Vue SSR y Nuxt; no bloquea el renderizado estático | ✅ Funciona con Vue SSR/Nuxt | | **Tree-shaking (enviar solo contenido usado)** | ✅ Por componente en tiempo de compilación | ⚠️ Parcial; requiere división manual de código/mensajes asíncronos | | **Carga diferida** | ✅ Por idioma / por diccionario | ✅ Soporte para mensajes de idioma asíncronos | | **Purgar contenido no usado** | ✅ Sí (en tiempo de compilación) | ❌ No incorporado | | **Mantenibilidad en proyectos grandes** | ✅ Fomenta una estructura modular y amigable con sistemas de diseño | ✅ Posible, pero requiere una fuerte disciplina en archivos/espacios de nombres | | **Ecosistema / comunidad** | ⚠️ Más pequeño pero en rápido crecimiento | ✅ Grande y maduro en el ecosistema Vue | --- ## Comparación en profundidad ### 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. - **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 - **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 - **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. **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) - **Ambos** pueden trabajar con rutas localizadas. - **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 - **vue-i18n**: Soporta mensajes de locales asíncronos; evitar la sobrecarga de paquetes depende de ti (divide los catálogos con cuidado). - **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 - **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. **Por qué importa:** Menores costos operativos y un ciclo de desarrollo–contenido más corto. --- ### 7) SEO, SSR y SSG - **Ambos** funcionan con Vue SSR y Nuxt. - **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. --- ## ¿Por qué Intlayer? (Problema y enfoque) La mayoría de los stacks i18n (incluyendo **vue-i18n**) comienzan desde **catálogos centralizados**: ```bash . ├── locales │ ├── en.json │ ├── es.json │ └── fr.json └── src └── components └── MyComponent.vue ``` O con carpetas por idioma: ```bash . ├── locales │ ├── en │ │ ├── footer.json │ │ └── navbar.json │ ├── fr │ │ ├── footer.json │ │ └── navbar.json │ └── es │ ├── footer.json │ └── navbar.json └── src └── components └── MyComponent.vue ``` 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). 2. **Al cambiar componentes** buscas claves compartidas, traduces, mantienes las locales sincronizadas, eliminas claves obsoletas y alineas las estructuras JSON. **Intlayer** delimita el contenido **por componente** y lo mantiene **junto al código**, como ya hacemos con CSS, historias, pruebas y documentación: ```bash . └── components └── MyComponent ├── MyComponent.content.ts └── MyComponent.vue ``` **Declaración de contenido** (por componente): ```ts fileName="./components/MyComponent/MyComponent.content.ts" import { t, type Dictionary } from "intlayer"; const componentExampleContent = { key: "component-example", content: { greeting: t({ en: "Hello World", es: "Hola Mundo", fr: "Bonjour le monde", }), }, } satisfies Dictionary; export default componentExampleContent; ``` **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 const { greeting } = useIntlayer("component-example"); </script> <template> <span>{{ greeting }}</span> </template> ``` Este enfoque: - **Acelera el desarrollo** (declara una vez; el IDE/IA autocompleta). - **Limpia la base de código** (1 componente = 1 diccionario). - **Facilita la duplicación/migración** (copia un componente y su contenido juntos). - **Evita claves muertas** (los componentes no usados no importan contenido). - **Optimiza la carga** (los componentes cargados perezosamente traen su contenido consigo). --- ## Características adicionales de Intlayer (relevantes para Vue) - **Soporte multiplataforma**: Funciona con Vue, Nuxt, Vite, React, Express y más. - **Gestión de contenido potenciada por JavaScript**: Declara en código con total flexibilidad. - **Archivo de declaración por localización**: Inicializa todas las localizaciones y deja que las herramientas generen el resto. - **Entorno con tipado seguro**: Configuración fuerte de TS con autocompletado. - **Recuperación de contenido simplificada**: Un solo hook/composable para obtener todo el contenido de un diccionario. - **Código organizado**: 1 componente = 1 diccionario en la misma carpeta. - **Enrutamiento mejorado**: Helpers para rutas y metadatos localizados en **Vue Router/Nuxt**. - **Soporte Markdown**: Importa Markdown remoto/local por localización; expone frontmatter al código. - **Editor visual gratuito y CMS opcional**: Creación de contenido sin una plataforma de localización de pago; sincronización amigable con Git. - **Contenido tree-shakeable**: Solo se incluye lo que se usa; soporta carga diferida. - **Compatible con renderizado estático**: No bloquea SSG. - **Traducciones impulsadas por IA**: Traduce a 231 idiomas usando tu propio proveedor de IA/clave API. - **Servidor MCP y extensión para VSCode**: Automatiza los flujos de trabajo de i18n y la creación de contenido dentro de tu IDE. - **Interoperabilidad**: Puentes con **vue-i18n**, **react-i18next** y **react-intl** cuando sea necesario. --- ## ¿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**. --- ## Notas prácticas para la migración (vue-i18n → Intlayer) - **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. --- ## Conclusión Tanto **vue-i18n** como **Intlayer** localizan bien las aplicaciones Vue. La diferencia es **cuánto debe construir usted mismo** para lograr una configuración robusta y escalable: - 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.