¿Está vue-i18n obsoleto en 2026?

En el entorno de Vue, pocas soluciones disfrutan de tanta presencia como vue-i18n. Conducido por Kazupon desde la época de Vue 2, sustenta @nuxtjs/i18n y representa la opción predeterminada para casi cualquier desarrollo multilingüe en Vue.

Aun así, nuestros benchmarks de 2026 revelaron un hallazgo llamativo: vue-i18n resultó ser el runtime de localización más pesado entre todos los frameworks frontend evaluados.

Partiendo de una base limpia de Vite + Vue de 31.5 KB, incorporar vue-i18n incrementó el JavaScript medio por página hasta los 136.4 KB, más que cuadruplicando la carga inicial.

¿Cómo es posible que un framework conocido por su ligereza acabe requiriendo un paquete de internacionalización tan abultado? ¿Y sigue teniendo sentido su modelo centrado en tiempo de ejecución?

Puntos clave

El runtime más voluminoso evaluado:

Con 24.3 KB gzipped (83.2 KB minificados) antes de incluir un solo texto traducido, vue-i18n es unas 9 veces más pesado que el runtime de intlayer (2.7 KB).

Un sobrecoste del 330% en la carga útil:

vue-i18n disparó una página Vue de 31.5 KB hasta 136.4 KB. Intlayer la mantuvo en 59.3 KB, lo que supone una carga útil un 56% más reducida.

Un compilador oculto en el navegador:

De forma predeterminada, a menos que se ajusten alias concretos en el empaquetador, vue-i18n envía un compilador de mensajes íntegro al navegador para procesar textos al vuelo.

Frecuencia de mantenimiento:

A lo largo del último año, vue-i18n acumuló ~259 commits, orientados a resolver incidencias y preservar la compatibilidad con Vue.

Carencia de herramientas modernas integradas:

No dispone de soporte oficial para servidores de lenguaje (LSP), servidores MCP de IA ni comandos de traducción automática en CLI.

Mantenimiento frente a herramientas actuales

Mostrar todo el contenido de la tabla

Mostrar todo el contenido de la tabla

Abrir la tabla en una ventana flotante para ver todo el contenido claramente

Repositorio	Estrellas	Commits totales	Commits / año	Último commit
intlify/vue-i18n
aymericzip/intlayer

Historial del último año:

• intlify/vue-i18n: 259 commits (mantenimiento regular para Vue 3 y Nuxt).
• aymericzip/intlayer: 4.343 commits (mejoras continuas en optimizaciones de compilación, LSP y herramientas de IA).

Una librería madura puede ser estable. No obstante, las aplicaciones contemporáneas aprovechan el procesado AST durante el build, la eliminación de código en desuso y la traducción con IA. Un esquema vinculado exclusivamente al runtime no asimila fácilmente estas posibilidades.

Rendimiento práctico en Vite + Vue

Evaluamos una aplicación de 10 páginas y 10 idiomas desarrollada con Vite y Vue 3:

Pruebas realizadas en entornos de navegador reales con compresión gzip. Información completa en la documentación del benchmark Vue.

Sobrecarga base de cada librería

Impacto inicial antes de cargar cualquier texto traducido:

Solo el runtime de vue-i18n ocupa 24.3 KB gzipped, prácticamente lo mismo que el núcleo de Vue. Intlayer añade únicamente 2.7 KB.

Peso por página y fuga de contenido

Conclusiones destacadas

Sobrecarga proporcional notable:

Dado que la base de Vue es extremadamente reducida (~31 KB), la inclusión de vue-i18n cuadruplica la carga total de la aplicación.

Fuga hacia otras rutas:

Por defecto, el 90% del contenido traducido enviado a una página pertenece a otras secciones. Intlayer suprime esta fuga por completo, bajándola al 0.0%.

Peso de componentes aislados:

Los componentes compilados con ámbitos de localización registraron una media de 196 KB en vue-i18n debido a la duplicación de catálogos, en comparación con los 6.5 KB de Intlayer.

¿Por qué vue-i18n es pesado?

Un compilador AST incluido en el navegador

vue-i18n lleva un compilador de formato de mensajes propio. Las reglas de plurales y las interpolaciones se interpretan como árboles de sintaxis abstracta (AST) en el navegador en tiempo de ejecución.

Para evitarlo, es necesario crear alias específicos en el empaquetador hacia vue-i18n/dist/vue-i18n.runtime.esm-bundler.js y precompilar los catálogos con @intlify/unplugin-vue-i18n. Muchos proyectos pasan esto por alto y entregan un compilador completo a sus visitantes.

Conjunto de utilidades monolítico

vue-i18n agrupa formateadores numéricos y temporales, resolutores de mensajes encadenados, puentes para la Options API clásica ($t, v-t) y proxys reactivos. Aunque solo precises textos sencillos en <script setup>, estás forzado a cargar el paquete entero.

Las claves dinámicas bloquean el tree-shaking

Al ser "home.hero.title" una clave resuelta dinámicamente, las herramientas de build no pueden determinar qué textos se emplean. Por ello, las cadenas en desuso permanecen en el bundle.

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("home.hero.title") }}</h1>
</template>

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

El compilador de Intlayer rastrea con exactitud las propiedades invocadas y suprime el contenido sin uso antes de ensamblar los paquetes del cliente. Consulta optimización de bundle para profundizar.

Experiencia de desarrollo

Catálogos dispersos frente a co-ubicación

En vue-i18n, las traducciones se gestionan en una carpeta locales/ aislada. Intlayer organiza los ficheros de contenido directamente junto a los componentes:

{
  "hero": {
    "title": "Ship in every language"
  }
}

{
  "hero": {
    "title": "Lanza en todos los idiomas"
  }
}

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("hero.title") }}</h1>
</template>

import { t, type Dictionary } from "intlayer";

export default {
  key: "hero",
  content: {
    title: t({
      en: "Ship in every language",
      es: "Lanza en todos los idiomas",
    }),
  },
} satisfies Dictionary;

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Al retirar o reorganizar Hero.vue, su fichero de contenido se traslada o descarta a la vez.

Autocompletado frente a exhaustividad rigurosa

DefineLocaleMessage ofrece autocompletado en el IDE tomando como base el esquema de referencia. Sin embargo, no comprueba la cobertura total. Si se omite una clave en es.json, TypeScript no generará ninguna alerta durante la compilación.

Intlayer evalúa los diccionarios con rigidez. Activar strictMode detiene el build si falta cualquier texto en cualquier idioma.

Herramientas para IDEs y agentes IA

Vías de traducción

vue-i18n no cuenta con comandos de traducción propios. Los equipos suelen exportar archivos a herramientas como Crowdin o Phrase.

Intlayer brinda estos flujos de forma integrada:

Auto-completado por IA local (intlayer fill):

Rellena las claves pendientes mediante tus claves API de OpenAI, Anthropic, Mistral o Gemini.

CMS visual autoalojable:

Habilita el CMS Intlayer para que editores no técnicos adapten textos con confirmación directa en Git.

Licencia de código abierto:

Todo el instrumental se proporciona bajo licencia Apache 2.0.

¿Cuándo sigue teniendo sentido vue-i18n?

¿Cómo mejorar mi configuración de vue-i18n existente?

Intlayer ofrece paquetes de compatibilidad directa que replican las firmas de funciones de vue-i18n y @nuxtjs/i18n (useI18n, $t, <i18n-t>). No necesitas reescribir tus plantillas ni tus composables para beneficiarte de una arquitectura optimizada por compilador.

La instalación se realiza con un único comando:

npx intlayer init --interactive

Esta CLI interactiva:

1. Instala el paquete de compatibilidad @intlayer/vue-i18n o @intlayer/nuxt-i18n.
2. Configura los alias en Vite o Nuxt para que tus importaciones y etiquetas habituales apunten directamente a Intlayer, permitiendo desinstalar vue-i18n de package.json.
3. Activa al instante el soporte del Language Server (LSP), elimina el analizador AST de 24 KB del bundle de cliente y desbloquea flujos locales de traducción por IA sin necesidad de una refactorización profunda.

Para consultar los detalles paso a paso, explora nuestras guías:

• Capa de compatibilidad: Conserva tus plantillas con la capa de compatibilidad de vue-i18n o @nuxtjs/i18n.
• Guías de migración paso a paso: Transforma archivos JSON tradicionales en diccionarios estructurados: desde vue-i18n o desde @nuxtjs/i18n.
• Estrategia híbrida: Conserva vue-i18n para la renderización mientras usas Intlayer con vue-i18n para ganar tipado seguro y autotraducción local por IA.

Evalúa el volumen y las fugas de tu aplicación con el escáner SEO i18n gratuito:

Lecturas recomendadas

• Benchmark Vue & Vite i18n: análisis detallado de prestaciones
• vue-i18n frente a Intlayer: comparativa técnica completa
• ¿Está next-intl obsoleto en 2026?
• Internacionalización basada en compilación frente a declarativa