Cómo Traducir un Sitio Vue.js / Nuxt a Múltiples Idiomas (Guía 2026)

Vue.js y Nuxt impulsan millones de sitios web y aplicaciones en todo el mundo. Pero cuando se trata de añadir soporte multilingüe, el ecosistema Vue ha sido históricamente más fragmentado que el de React — dejando a los desarrolladores ensamblar soluciones a partir de múltiples bibliotecas y configuración manual.

En 2026, tienes tres caminos sólidos: vue-i18n (la biblioteca oficial de internacionalización de Vue), @nuxtjs/i18n (el módulo Nuxt que envuelve vue-i18n con enrutamiento y SEO), y LingoJS (el enfoque de un script que funciona con cualquier proyecto Vue o Nuxt sin tocar tu código).

Esta guía recorre los tres enfoques — con ejemplos de código reales, tiempos de configuración y un marco claro para elegir el correcto.

Por Qué el Multilingüe en Vue.js Importa en 2026

Vue.js es el segundo framework frontend más popular del mundo, y Nuxt es el meta-framework Vue más usado. Empresas como Nintendo, GitLab, Adobe y BMW usan Vue en producción. Si tu app Vue solo habla un idioma, eres invisible para una parte significativa de tu audiencia potencial.

Los números son claros: el 75% de los usuarios prefiere comprar en sitios en su idioma nativo, y las páginas localizadas consistentemente rankean mejor en los motores de búsqueda regionales. Para sitios Nuxt — que dependen del SSR y la generación estática para el SEO — traducir tu contenido desbloquea tráfico orgánico en cada mercado objetivo.

Enfoque 1: vue-i18n — La Biblioteca Oficial

vue-i18n es la biblioteca estándar de internacionalización para Vue.js, mantenida por el equipo central de Vue. Se integra con la Composition API de Vue 3 y proporciona traducción reactiva, pluralización, formato de fechas y cambio de locale.

Configuración

npm install vue-i18n@10

// i18n.ts
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import fr from './locales/fr.json';
 
const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, fr }
});
 
export default i18n;

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';
 
const app = createApp(App);
app.use(i18n);
app.mount('#app');

En tus componentes, usas la función $t():

<template>
  <h1>{{ $t('hero.title') }}</h1>
  <p>{{ $t('hero.subtitle') }}</p>
</template>

Lo que funciona bien

vue-i18n es rápido, bien documentado y estrechamente integrado con el sistema de reactividad de Vue. La carga perezosa de archivos de locale es soportada de forma nativa. El soporte de Composition API (useI18n()) es limpio e idiomático.

Lo que se complica

Cada cadena a traducir debe envolverse en $t() o t() en tus plantillas. Eso significa tocar cada componente que renderiza texto visible. Los archivos de traducción son JSON que mantienes manualmente. Añadir un nuevo idioma implica copiar todo el archivo JSON en inglés y traducir cada entrada. Para una app Vue mediana con más de 500 cadenas traducibles en 20 componentes, esto representa días de configuración inicial y mantenimiento continuo.

El SEO también es manual — necesitas configurar etiquetas hreflang, metadatos localizados y un sitemap multilingüe por tu cuenta o mediante un módulo Nuxt.

Enfoque 2: @nuxtjs/i18n — El Módulo Nuxt

Si usas Nuxt 3, el módulo @nuxtjs/i18n envuelve vue-i18n y añade generación automática de rutas, detección de locale, etiquetas SEO y estrategias de URL. Es la solución i18n más completa para proyectos Nuxt.

Configuración

npx nuxi module add i18n

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'fr', 'de', 'es', 'it'],
    defaultLocale: 'en',
    strategy: 'prefix',
    vueI18n: './i18n.config.ts'
  }
});

El módulo genera automáticamente rutas por locale (/fr/about, /de/about), inyecta etiquetas hreflang y proporciona composables como useLocalePath() y useSwitchLocalePath().

Lo que funciona bien

La generación de rutas y la automatización de hreflang ahorran horas de configuración manual. La opción strategy soporta modos prefix (/fr/about), prefix excepto default (/about + /fr/about) y sin prefix. Los metadatos SEO por locale se manejan mediante useSeoMeta() en combinación con el módulo i18n.

Lo que aún requiere trabajo

Sigues escribiendo cada traducción manualmente en archivos JSON. El módulo maneja la capa de enrutamiento pero no traduce tu contenido — solo sirve el archivo correcto para cada locale. Para un sitio Nuxt con blog, documentación o contenido generado por usuarios, la carga de mantenimiento crece linealmente.

Enfoque 3: LingoJS — Un Script, Cero Cambios de Código

LingoJS funciona con cualquier proyecto Vue o Nuxt sin modificaciones de código. Añades una etiqueta script a tu plantilla HTML (o usas el composable useHead de Nuxt), y LingoJS detecta, traduce y sirve automáticamente tu contenido en cada idioma que actives.

Configuración para Vue

<!-- index.html -->
<script
  src="https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js"
  data-api-key="YOUR_API_KEY"
  async
></script>

Configuración para Nuxt

<!-- app.vue -->
<script setup>
useHead({
  script: [
    {
      src: 'https://cdn.jsdelivr.net/gh/Flowcodelab/LingoJs@main/lingo-snippet.obf.js',
      async: true,
      'data-api-key': 'YOUR_API_KEY'
    }
  ]
});
</script>

Eso es todo. LingoJS maneja todo automáticamente — detección de texto, traducción IA contextual, entrega CDN a ~26ms, etiquetas hreflang, metadatos localizados, schema.org y widget de selección de idioma.

Comparación: Vue-i18n vs Nuxt-i18n vs LingoJS

Rendimiento: ¿Qué Impacto Tiene la Traducción?

vue-i18n cargado con una sola locale añade aproximadamente 12KB a tu bundle Vue. Cada locale adicional cargada añade el tamaño de su archivo JSON. Para un sitio Nuxt con SSR, el servidor debe cargar y procesar estos archivos en cada solicitud.

LingoJS se carga de forma asíncrona desde la CDN global de jsDelivr. El script no bloquea el renderizado, y las traducciones se cachean en el edge. Resultado: las Core Web Vitals de tu app Vue no se ven afectadas.

SEO para Sitios Multilingües Vue/Nuxt

El SSR y la generación estática de Nuxt ya proporcionan una base SEO sólida. Pero añadir idiomas multiplica la complejidad:

• Etiquetas hreflang deben estar presentes en cada variante de página, recíprocas y apuntar a la URL correcta
• URLs canónicas deben referenciar la versión de idioma correcta
• Etiquetas meta (title, description, og:title, og:description) deben traducirse por locale
• Datos estructurados (schema.org) deben localizarse
• Sitemaps multilingües ayudan a Google a descubrir cada versión

@nuxtjs/i18n maneja la generación hreflang automáticamente en modo prefix. vue-i18n solo no hace nada de esto. LingoJS lo maneja todo automáticamente.

Cuándo Usar Cada Enfoque

Usa vue-i18n si: Construyes una SPA Vue pura (sin Nuxt), necesitas control por cadena, tienes un número limitado de cadenas o ya tienes un equipo de traducción produciendo archivos JSON.

Usa @nuxtjs/i18n si: Estás en Nuxt 3, quieres generación automática de rutas y SEO básico, y te sientes cómodo manteniendo archivos de traducción.

Usa LingoJS si: Quieres que tu sitio Vue o Nuxt sea multilingüe hoy sin modificar componentes, gestionar archivos de traducción ni configurar SEO. Valoras la velocidad de ingeniería o eres un equipo pequeño.

Cómo Empezar

Para evaluar el enfoque cero-código, instala LingoJS en tu proyecto Vue o Nuxt en dos minutos:

1. Crea una cuenta gratuita en lingojs.com
2. Obtén tu clave API del dashboard
3. Añade la etiqueta script a tu plantilla HTML o app.vue
4. Elige tus idiomas objetivo en el dashboard
5. Despliega — tu sitio ahora es multilingüe

Comienza tu prueba gratuita de 30 días →