Vue i18n frente a traducción automática: qué enfoque elegir para tu app Vue (2026)
Vue tiene una librería de i18n madura y muy querida. También tiene un ecosistema de herramientas de traducción basadas en el DOM que no requieren ningún cambio en el código fuente. Cuál te conviene depende de factores que la mayoría de guías se saltan — aquí tienes el desglose honesto.
La historia de i18n en Vue
vue-i18n (creada por kazupon, ahora mantenida bajo la organización @intlify como @intlify/vue-i18n-next) es el estándar de facto para la internacionalización de Vue. Tiene soporte de primer nivel tanto para Vue 2 (vue-i18n v8) como para Vue 3 (vue-i18n v9+).
La API es limpia y está bien documentada. En una app Vue 3 con la Composition API:
// main.ts
import { createI18n } from 'vue-i18n'
const i18n = createI18n({
legacy: false,
locale: 'en',
fallbackLocale: 'en',
messages: { en, fr, de },
})
app.use(i18n)
Dentro de los componentes usas el composable useI18n y la función t():
<script setup lang="ts">
const { t } = useI18n()
</script>
<template>
<h1>{{ t('home.title') }}</h1>
<p>{{ t('home.description') }}</p>
</template>
En Vue 2 o en la Options API, la misma cadena se accede como $t('home.title') en las plantillas. La librería está probada en batalla, tiene una comunidad activa y soporta desde búsquedas simples de cadenas hasta formato complejo de números y fechas mediante la API de Internacionalización de ECMAScript.
La carga de mantenimiento
vue-i18n es potente, pero esa potencia tiene un coste de mantenimiento que aumenta a medida que crece tu aplicación:
- →Archivos de locale JSON por idioma. Cada cadena de tu app debe extraerse a un archivo clave-valor para cada idioma compatible. Un producto SaaS típico tiene de cientos a miles de claves. Cada nueva funcionalidad implica nuevas claves en todos los archivos de locale.
- →Mantener los archivos sincronizados. Cuando un desarrollador añade una nueva cadena de interfaz y olvida actualizar el archivo de locale francés, el locale de respaldo muestra inglés a los usuarios franceses — a menudo en silencio. Herramientas como
vue-i18n-extractayudan pero añaden sobrecarga de configuración. - →Tamaño del bundle y carga diferida. Enviar todo el JSON de locale por adelantado infla el bundle inicial. La carga diferida por locale requiere configuración de chunks asíncronos en Vite/webpack y gestionar el estado de carga durante los cambios de locale.
- →Reglas de plural por idioma. El inglés tiene dos formas plurales; el ruso tiene cuatro; el árabe tiene seis. vue-i18n gestiona esto con sintaxis de mensajes ICU, pero alguien debe escribir y verificar las cadenas de plural para cada idioma.
- →Formato de fecha y número. El formato sensible al locale requiere configuración explícita de
datetimeFormatsynumberFormatspor locale — horas de trabajo de configuración antes de que un usuario vea una fecha correctamente formateada.
Para un equipo sin ingenieros de i18n dedicados, esta carga suele traducirse en que la traducción se retrasa respecto al producto — enviando cadenas en inglés a usuarios internacionales pese a tener “soporte” para su idioma.
Cuándo vue-i18n es la opción correcta
Apps de código abierto con traducciones de la comunidad
Si tu proyecto depende de colaboradores de la comunidad para aportar traducciones — algo habitual en herramientas de código abierto — los archivos de locale JSON de vue-i18n se integran de forma limpia con plataformas como Crowdin o Weblate, donde los traductores trabajan directamente sobre los archivos.
Flujo de aprobación de traducción estricto
Las aplicaciones legales, médicas o gubernamentales donde cada cadena debe revisarse y aprobarse antes de llegar a producción se benefician del control explícito por clave que ofrece vue-i18n.
Formato complejo de número, fecha y moneda
Las aplicaciones que muestran datos financieros, mediciones científicas o rangos de fecha complejos necesitan reglas de formato por locale. El soporte de mensajes ICU integrado en vue-i18n gestiona estos casos de forma sistemática.
Apps que requieren capacidad sin conexión
Si tu app Vue debe funcionar sin conexión (PWA, apps de Electron), todas las cadenas de locale deben estar empaquetadas y disponibles sin una solicitud de red. Los archivos de locale JSON de vue-i18n se empaquetan en tiempo de compilación.
Cuándo gana la traducción automática
App Vue existente que añade multilingüismo sin reescritura
Adaptar vue-i18n a una aplicación Vue 2 o Vue 3 existente implica tocar cada componente que renderiza texto — a menudo cientos de archivos. Un widget de traducción basado en el DOM requiere una sola etiqueta de script y ningún cambio en los componentes.
Equipos sin ingenieros de i18n dedicados
Mantener los archivos de locale con precisión requiere a alguien que entienda tanto el producto como cada idioma de destino. Sin esa persona, la traducción automática produce mejores resultados que archivos de locale desactualizados o incompletos.
Iteración rápida de interfaz
Cuando el producto cambia semanalmente, mantener las claves de traducción se convierte en una carga. Cada cambio de copy de interfaz requiere actualizar todos los archivos de locale. La traducción automática gestiona las cadenas nuevas en el primer renderizado sin ninguna acción del desarrollador.
Productos SaaS que priorizan la velocidad de salida al mercado
Los ingresos internacionales requieren estar activo en esos mercados. Un enfoque basado en el DOM te lleva a estar “activo en francés” en una tarde en lugar de tras un sprint de ingeniería de 3 semanas.
Cómo funciona Lingvit con Vue
El widget de Lingvit es independiente del framework — opera a nivel del DOM, no del framework. Para apps Vue:
- →Añade la etiqueta de script a tu
index.htmlantes de</body>. Vue se monta después de que el script se analiza, y el widget se inicializa una vez que el DOM está poblado. - →Un MutationObserver gestiona el renderizado reactivo de Vue. Cuando
v-ifrevela una sección,v-forrenderiza una lista, o un componente se monta tras una operación asíncrona, los nuevos nodos del DOM se traducen de inmediato. - →Funciona con Vue 2 y Vue 3. Los internos de renderizado difieren, pero el resultado siempre son nodos DOM — que es todo lo que el widget necesita.
- →Nuxt.js es compatible. Para Nuxt 3 (renderizado en servidor), añade el script mediante
app.head.scriptennuxt.config.tscontagPosition: 'bodyClose'. Para Nuxt 2 usa la propiedadheadennuxt.config.js.
Comparación de configuración
Configuración de vue-i18n
- 1. Instala
vue-i18ny configuracreateI18nenmain.ts - 2. Crea
src/locales/en.json,fr.json, etc. - 3. Envuelve cada cadena de la plantilla con
t()o$t()en todos los componentes - 4. Configura el plugin de Vite para la carga diferida de locale
- 5. Añade el componente de interfaz para el selector de locale
- 6. Completa los archivos de traducción por idioma
Configuración de Lingvit
- 1. Añade una etiqueta
<script>aindex.html - 2. Selecciona los idiomas de destino en el panel
Preguntas frecuentes
- ¿Funciona con Nuxt.js?
- Sí. Para Nuxt 3, añade el script mediante app.head.script en nuxt.config.ts con tagPosition: 'bodyClose'. Lingvit observa el DOM final después de que el HTML renderizado en servidor de Nuxt se hidrata y tras cualquier navegación del lado del cliente mediante la integración con Vue Router.
- ¿Funciona con Vue 2?
- Sí. Lingvit es independiente del framework y opera a nivel del DOM. Vue 2 y Vue 3 producen ambos nodos DOM estándar, así que el MutationObserver gestiona las actualizaciones reactivas sin importar qué versión use tu app.
- ¿Qué pasa con los campos v-model — se traducirá el texto escrito por el usuario?
- No. Lingvit traduce los nodos de texto del DOM pero no traduce el valor de los elementos de entrada vinculados con v-model. El contenido introducido por el usuario queda excluido por defecto. También puedes añadir el atributo data-lingvit-ignore a cualquier elemento para excluir su subárbol de la traducción.
Guías relacionadas
Añade idiomas a tu app Vue
Funciona con Vue 2, Vue 3 y Nuxt.js. Una etiqueta de script, sin reescritura.