Internacionalización con Vue I18n: configurar multiidioma

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:51

Internacionalización con Vue I18n: configurar multiidioma

Curso Profesional de Vue.js 2

Clase 51 de 53

Clase 51 / 53

Recursos

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.