Internacionalización con Vue I18n: configurar multiidioma

La internacionalización en Vue puede ser simple y confiable si se usa bien. Aquí verás cómo implementar soporte multiidioma con la librería vue-i18n, desde la instalación hasta el cambio de idioma en vivo, usando un objeto de mensajes y la función $t para renderizar textos. Todo con prácticas claras y repetibles en proyectos reales.

¿Qué es la internacionalización y cómo ayuda vue i18n?

La internacionalización, también llamada I dieciocho N, es la capacidad de una aplicación para funcionar en distintos idiomas y regiones. Con vue-i18n —no oficial, pero mantenida por un contribuidor activo— se logra una configuración rápida, soporte para múltiples idiomas y buena experiencia en producción. La idea central: traducir textos a partir de un objeto JavaScript y usar un plugin para exponer métodos de traducción en los componentes.

¿Cómo instalar y preparar el plugin?

• Instala la librería con npm:

npm i -S vue-i18n

• Crea src/i18n.js, importa Vue y vue-i18n, e inicializa el plugin.

// src/i18n.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    search: 'search',
    about: 'about'
  },
  es: {
    search: 'búsqueda',
    about: 'nosotros'
  }
}

const i18n = new VueI18n({
  messages,
  locale: 'en' // idioma por defecto
})

export default i18n

• Inserta i18n en main.js para inyectarlo como plugin y habilitar sus métodos en los componentes.

// main.js
import Vue from 'vue'
import App from './App.vue'
import i18n from '@/i18n'

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

¿Qué estructura de mensajes necesitas?

• Usa un objeto messages con una clave por idioma, por ejemplo en y es.
• Define claves de texto consistentes: search y about en ambos idiomas.
• Mantén las mismas keys en todos los idiomas para evitar errores.

¿Cómo aplicar las traducciones en los componentes?

El método central es $t: recibe una clave como string y devuelve el texto traducido según el idioma activo. Evita valores sin comillas: Vue intentará buscarlos en data.

¿Cómo usar la función $t de forma segura?

• Pasa siempre la clave entre comillas: '$t(\'search\')'.
• Verifica que la clave exista en cada idioma dentro de messages.
• Mantén nombres cortos y semánticos para las claves.

Ejemplo en Header.vue reemplazando textos fijos por claves:

<!-- Header.vue -->
<template>
  <nav>
    <a>{{ $t('search') }}</a>
    <a>{{ $t('about') }}</a>
  </nav>
</template>

¿Cómo permitir el cambio de idioma en tiempo real?

Agrega opciones en el header con un método selectLang que actualice this.$i18n.locale. El cambio es reactivo y actualiza los textos al instante.

<template>
  <nav>
    <a @click="selectLang('en')">🇬🇧</a>
    <a @click="selectLang('es')">🇪🇸</a>
    <a>{{ $t('search') }}</a>
    <a>{{ $t('about') }}</a>
  </nav>
</template>

<script>
export default {
  methods: {
    selectLang(lang) {
      this.$i18n.locale = lang
    }
  }
}
</script>

• Cambiar locale en tiempo real: usa this.$i18n.locale con el valor recibido.
• El plugin expone $i18n y $t en los componentes una vez inyectado.
• La UI alterna entre inglés y español mostrando search/about o búsqueda/nosotros.

¿Qué habilidades y keywords consolidas al implementar i18n?

Dominas una secuencia clara que acelera la adopción de multiidioma y mejora la mantenibilidad del código.

• Instalación con npm i -S vue-i18n.
• Registro del plugin con Vue.use(VueI18n).
• Diseño de un objeto messages por idioma.
• Consistencia de claves: la misma key en todos los idiomas.
• Uso de $t para renderizar traducciones.
• Cambio dinámico de locale con this.$i18n.locale.
• Inyección del plugin desde main.js para disponibilidad global.
• Integración con router y mención a reactividad junto a Vuex en el flujo general.

¿Tienes dudas sobre cómo organizar las claves o escalar a más idiomas? Comparte tu caso en los comentarios y conversemos soluciones prácticas.