Internacionalización en Nuxt.js: i18n frente a traducción automática (2026)
Nuxt.js tiene dos caminos creíbles hacia un sitio multilingüe: el módulo oficial @nuxtjs/i18n, que conecta Vue Router, archivos de locale y enrutamiento de slugs, y la traducción automática basada en el DOM mediante una única etiqueta de script. Ambos funcionan, pero resuelven problemas distintos y se adaptan a equipos muy diferentes. Aquí está la comparación honesta.
Qué hace realmente @nuxtjs/i18n
@nuxtjs/i18n (nuxt-i18n) es el módulo oficial de Nuxt para la internacionalización. Envuelve vue-i18n y se integra estrechamente con el enrutamiento basado en archivos de Nuxt y Vue Router. Lo que te ofrece:
- Enrutamiento de URL con prefijo de locale —
/fr/about,/de/pricing— gestionado automáticamente por la capa de enrutamiento de Nuxt. - Detección de locale del navegador desde la cabecera
Accept-Language(del lado del servidor) onavigator.language(del lado del cliente). - Etiquetas
hreflanggeneradas automáticamente para cada versión de idioma de una página: importante para el SEO. - El composable
$t()y el hookuseI18n()para traducir cadenas dentro de plantillas y<script setup>.
Lo que no hace: traducir ninguno de tus contenidos. Cada cadena de cada archivo de locale debe ser escrita por un humano (o pasada manualmente por un servicio de traducción). El módulo gestiona el enrutamiento y la búsqueda; rellenar las traducciones reales es tu responsabilidad.
Configurar @nuxtjs/i18n: qué implica realmente
Una configuración mínima de nuxt-i18n para tres idiomas requiere estas piezas:
- 1Instalar el módulo y registrarlo en
nuxt.config.tsbajomodules. - 2Declarar los locales, el locale predeterminado y la estrategia de carga diferida en el bloque de configuración
i18n. - 3Crear archivos JSON por locale:
locales/en.json,locales/fr.json,locales/de.json: uno por idioma soportado, actualizado con cada nueva cadena de interfaz. - 4Reemplazar cada cadena fija en cada componente por una llamada
$t('key')ot('key'): tocando cada archivo.vuedel proyecto. - 5Añadir un componente selector de locale a la navegación; actualizar la lógica de enrutamiento para cualquier página de slug personalizada (por ejemplo, una entrada de blog en
/blog/[slug]se convierte en/fr/blog/[slug]con el enrutamiento i18n de Nuxt).
Un bloque i18n mínimo de nuxt.config.ts:
Y un locales/en.json correspondiente:
Cada clave debe duplicarse y traducirse en fr.json y de.json, y mantenerse sincronizada para siempre a medida que el producto evoluciona.
El coste de mantenimiento acumulado
La sobrecarga por cadena es pequeña de forma aislada. El coste agregado en un producto real se acumula rápidamente:
Acoplamiento de contenido y código
Cada nueva cadena de interfaz requiere una clave en el archivo de locale de origen y una entrada correspondiente en cada archivo de locale de destino. Una función lanzada el lunes significa que los archivos en francés y alemán deben actualizarse antes de que los usuarios franceses y alemanes vean algo más que una clave de respaldo.
Refactorizar componentes toca cada archivo
Añadir nuxt-i18n a un proyecto existente significa tocar cada archivo .vue que renderiza texto: envolviendo cadenas en $t(), extrayendo valores a archivos de locale y verificando que no se omita nada. En un proyecto con más de 50 componentes, esto es una refactorización de varios días.
Desfase de archivos de locale
Sin herramientas como la detección de claves faltantes de @nuxtjs/i18n o un script de terceros, los archivos de locale divergen silenciosamente. El archivo en inglés gana claves que faltan en el francés, y el renderizado de respaldo muestra silenciosamente texto en inglés a los usuarios franceses.
El RTL requiere trabajo de diseño separado
nuxt-i18n traduce cadenas; no invierte la dirección del diseño. Dar soporte al árabe o al hebreo significa establecer dir="rtl" en el elemento raíz, auditar cada componente en busca de propiedades CSS físicas y probar todo el diseño en modo RTL: un esfuerzo de ingeniería aparte.
Cuándo @nuxtjs/i18n es la elección correcta
Hay situaciones específicas donde la pila completa del módulo está claramente justificada:
Sitios de contenido críticos para el SEO con URL por idioma
Cuando cada versión de idioma debe ser una URL distinta e indexable con su propia canónica y hreflang, y tienes los recursos de desarrollo para construirlo y mantenerlo, nuxt-i18n ofrece exactamente eso.
Apps de código abierto con traducciones comunitarias
Cuando las traducciones son aportadas por la comunidad mediante pull requests en GitHub, los archivos JSON de locale son la interfaz de contribución correcta. Crowdin, Weblate y plataformas similares se integran directamente con este formato.
Contenido regulado por cumplimiento normativo
Aplicaciones legales, médicas o financieras donde cada cadena debe revisarse y aprobarse explícitamente antes de publicarse. nuxt-i18n convierte cada cadena en un artefacto discreto auditable con historial de versiones.
PWA con capacidad offline
Las apps de Nuxt que deben funcionar sin conexión necesitan todas las cadenas de locale incluidas en tiempo de compilación. Los archivos JSON de locale de nuxt-i18n se incluyen en la compilación; la traducción basada en el DOM no puede funcionar sin conexión de red.
Añadir Lingvit a una app de Nuxt 3
La alternativa es una etiqueta de script: sin instalación de módulos, sin archivos de locale, sin cambios en componentes. Para Nuxt 3, añade el script mediante la propiedad app.head en nuxt.config.ts:
Alternativamente, usa el composable useHead dentro de tu app.vue raíz si prefieres control a nivel de componente:
Esa es toda la integración. El widget de Lingvit usa un MutationObserver para vigilar el DOM después de que Nuxt renderiza e hidrata. Gestiona:
- HTML renderizado en servidor y transmitido desde el motor SSR de Nuxt: traducido de inmediato una vez que se completa la hidratación.
- Actualizaciones reactivas de Vue: el contenido revelado por
v-if, renderizado porv-for, o cargado mediante obtención de datos asíncrona se traduce a medida que aparecen nuevos nodos en el DOM. - Navegación de Vue Router: las transiciones de ruta del lado del cliente de Nuxt activan el observador para el contenido de la nueva página renderizada.
- Diseño RTL:
document.documentElement.dirse establece automáticamente al cambiar a árabe, hebreo u otro idioma RTL.
Comparación de configuración
Configuración de @nuxtjs/i18n
- 1.Instalar
@nuxtjs/i18ny registrar ennuxt.config.ts - 2.Configurar locales, estrategia y carga diferida en el bloque
i18n - 3.Crear
locales/en.json,fr.json, etc. - 4.Envolver cada cadena de plantilla con
$t()en todos los archivos.vue - 5.Añadir un componente de UI selector de locale
- 6.Rellenar los archivos de traducción por idioma
Configuración de Lingvit
- 1.Añadir una entrada
scriptanuxt.config.tsapp.head - 2.Seleccionar los idiomas de destino en el panel de Lingvit
Cuándo la traducción automática es suficiente
Para muchos proyectos de Nuxt, la traducción basada en el DOM no es un compromiso: es la decisión de ingeniería correcta:
Sitios de marketing y contenido
Un sitio de marketing o blog de Nuxt no tiene pluralización compleja, ni requisito offline, y cambia el texto con frecuencia. La traducción automática gestiona cada nuevo párrafo en el primer renderizado sin ninguna acción del desarrollador.
Paneles de SaaS que añaden idiomas rápidamente
Los usuarios internacionales significan ingresos internacionales. Salir en vivo en francés mediante una etiqueta de script toma una tarde. Retroadaptar nuxt-i18n a un panel de SaaS existente toma semanas y toca cada componente.
Iteración rápida de producto
Cuando el texto de la interfaz cambia semanalmente, el mantenimiento de archivos de locale se convierte en un lastre para la velocidad. Cada actualización de texto requiere tocar cada archivo de locale antes de que los traductores puedan revisarlo. La traducción automática gestiona las cadenas nuevas en el primer renderizado sin ninguna acción del desarrollador.
Apps de Nuxt existentes sin i18n
Añadir nuxt-i18n a un proyecto que no se construyó con él significa tocar cada componente que renderiza texto. Un widget basado en el DOM requiere cero cambios en componentes: añade la etiqueta de script, selecciona los idiomas, listo.
Lo que la traducción automática no cubre
La traducción basada en el DOM tiene límites reales. Entiéndelos antes de elegir:
Cadenas solo de servidor
Las cadenas usadas en plantillas de correo del lado del servidor, cuerpos de respuesta de API o rutas de servidor de Nuxt nunca se renderizan en un DOM de navegador y no se traducirán.
Pluralización ICU compleja
Las aplicaciones que necesitan pluralización gramaticalmente correcta para idiomas con reglas de plural complejas (árabe: seis formas, polaco: cuatro formas) para valores contados dinámicamente requieren soporte de formato de mensaje ICU: una característica de librería, no traducción a nivel de DOM.
Requisito offline / PWA
Si tu app de Nuxt debe funcionar completamente sin conexión, la traducción automática no es una opción: requiere una llamada de red para obtener las traducciones. Usa archivos JSON de locale incluidos en tiempo de compilación.
Preguntas frecuentes
- ¿Funciona Lingvit con Nuxt 3 y Nuxt 4?
- Sí. Lingvit es agnóstico al framework y opera a nivel del DOM. Tanto Nuxt 3 como Nuxt 4 producen HTML estándar que el widget observa mediante MutationObserver. Añade el script mediante app.head.script en nuxt.config.ts con tagPosition: 'bodyClose' y funciona de forma predeterminada.
- ¿Funciona Lingvit con Nuxt SSR?
- Sí. El HTML renderizado en servidor de Nuxt se envía al navegador, y luego Vue lo hidrata. Lingvit se inicializa después de que la hidratación se completa y capta todos los nodos de texto del DOM renderizado, ya sean del servidor o de cambios de estado del lado del cliente.
- ¿Interferirá Lingvit con la hidratación de Vue?
- No. El script de Lingvit carga de forma asíncrona después de que el DOM está listo y espera a que la página se estabilice antes de traducir. No toca el DOM virtual, no modifica el estado del componente y no activa la reactividad de Vue: solo modifica los nodos de texto renderizados.
- ¿Puedo usar @nuxtjs/i18n junto con Lingvit?
- Sí. Si ya tienes @nuxtjs/i18n para parte del contenido y quieres traducción automática para el resto, ambos pueden coexistir. Lingvit traduce cualquier nodo de texto que esté en el DOM en el momento del renderizado, incluidas las cadenas ya traducidas por nuxt-i18n.
Guías relacionadas
Añade idiomas a tu app de Nuxt
Funciona con Nuxt 3 y Nuxt 4, SSR y estático. Una entrada de configuración, sin cambios en componentes.