Internacionalización de Aplicaciones con Vue I18n

¿Qué es la internacionalización y cómo se implementa en Vue?

La internacionalización, o i18n como se le conoce comúnmente, consiste en adaptar nuestras aplicaciones para que puedan funcionar de manera óptima en varios idiomas y regiones. Se le llama i18n porque entre la "i" de "internacionalización" y la "n" hay 18 letras. Usar una biblioteca especializada en Vue, como vue-i18n, nos permite integrar esta funcionalidad de manera eficiente. Esta herramienta, aunque no es oficial, es una recomendación confiable, probada en producción, que facilita la traducción de los textos de nuestra aplicación.

¿Cómo instalamos y configuramos vue-i18n?

El primer paso para integrar vue-i18n en nuestra aplicación Vue es su instalación a través del gestor de paquetes npm.

npm install -s vue-i18n

Una vez instalada, es necesario crear un archivo de configuración. Este archivo actúa de manera similar a otras herramientas de Vue como el router o Vuex. Dentro de src, se crea un archivo llamado i18n.js, donde se realizan las importaciones necesarias:

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

¿Cómo configuramos los mensajes y establecemos el idioma por defecto?

El siguiente paso es definir un objeto messages que contiene los textos que se desean traducir. Este objeto tiene sub-objetos por cada idioma soportado, cada uno almacenando las traducciones necesarias:

const messages = {
  en: {
    search: 'Search',
    about: 'About'
  },
  es: {
    search: 'Búsqueda',
    about: 'Nosotros'
  }
};

Creamos una instancia de VueI18n donde configuramos los mensajes y el idioma por defecto:

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

export default i18n;

¿Cómo se integran las traducciones en los componentes?

Para que los componentes puedan acceder a las traducciones, el objeto i18n debe ser inyectado en el archivo main.js de manera similar al router y el store:

import i18n from './i18n';

new Vue({
  i18n,
  // otros elementos de la instancia
}).$mount('#app');

En los componentes, podemos usar el método t que proporciona vue-i18n para mostrar las traducciones:

<template>
  <div>
    <p>{{ $t('search') }}</p>
    <p>{{ $t('about') }}</p>
  </div>
</template>

¿Cómo configuramos el cambio dinámico de idioma?

Para permitir que el usuario cambie de idioma y vea cómo las traducciones se actualizan en tiempo real, es necesario crear métodos que cambien la propiedad locale. Esto suele hacerse desde métodos dentro de un componente Vue:

methods: {
  selectLang(lang) {
    this.$i18n.locale = lang;
  }
}

Dentro del componente, se pueden incluir iconos o textos que, al ser clickeados, llamen este método con el idioma deseado:

<button @click="selectLang('en')">🇬🇧</button>
<button @click="selectLang('es')">🇪🇸</button>

Finalmente, probar el funcionamiento cambiando de idioma con los botones agregados y observando cómo los textos cambian dinámicamente gracias a Vuex y el sistema de reactividad de Vue. Este enfoque no solo facilita la traducción de nuestra aplicación, sino que también mejora significativamente la experiencia del usuario multilenguaje.