Traducir en VueJS

En este artículo aprenderemos cómo traducir en VueJS con la librería Vue-i18n, en menos de 3 minutos.

Traducir aplicación VueJS con i18n

Para comenzar, instalaremos la librería Vue-i18n. Puedes utilizar tanto npm como yarn, te dejo las dos opciones (previamente instalados):

# Yarn 
  yarn add vue-i18n 

# npm
  npm install vue-i18n

Una vez tengamos instalada la librería, nos dirigimos a la carpeta src de nuestro proyecto y crearemos una carpeta llamada lang.

En ésta carpeta crearemos dos JSON en_US.json y es_ES.json. En estos archivos serán dónde vayan las traducciones que utilizaremos en nuestra aplicación VueJS.

en_US.json:

{
    "notification": {
        "msg": "You have new notification"
    }
}

es_ES.json:

{
    "notification": {
        "msg": "Tienes una nueva notificación"
    }
}

Podemos crear tantos idiomas como queramos, creando sus respectivos archivos, como hemos hecho con el ingles y el español.

Añadiendo i18n a VueJS

Ahora nos dirigimos al archivo main.js, que se encuentra en la carpeta src de nuestro proyecto vueJS.

Para que VueJS detecte i18n y podamos traducir necesitamos importar la librería e indicarle qué archivo json utilizar para cada lenguaje, de esta forma:

main.js:

import Vue from 'vue'
import App from './App.vue'

//Importamos la librería y nuestros dos json
import VueI18n from 'vue-i18n';
import en from './lang/en_US'
import es from './lang/es_ES'

Vue.config.productionTip = false

//añadimos la libreria
Vue.use(VueI18n);

/* Creamos una instancia de la librería i18n, le añadimos por defecto el idioma 'en' 
(puedes cambiarlo por 'es') y le indicamos qué json utilizar en cada idioma */
const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      lang: en
    },
    es: {
      lang: es
    }
  }
});

//Finalmente, la añadimos a la instancia de Vue
new Vue({
  render: h => h(App),
  i18n
}).$mount('#app')

Añadir traducción a componente VueJS

Para comprobar que todo funciona correctamente, iremos al componente dónde queramos añadir el mensaje que tenemos en el json (En mi caso, lo haré en el App.vue como ejemplo) y añadiremos lo siguiente:

//Llamamos mediante $t a la librería i18n y le pasamos como parametro el mensaje del json
<p>{{ $t('lang.notification.msg') }}</p>

De esta forma, mostrará el mensaje en ingles, ya que por defecto le hemos añadido ‘en’.

Elegir idioma de la aplicación

También podemos añadir un select con la lista de idiomas disponibles, para que el usuario pueda cambiarlo.

<template>
  <div id="app">
    <!-- elegiremos el model i18n.locale que es la variable que controla el idioma de nuestra aplicacion
    <select v-model="$i18n.locale">
      <option
        v-for="(lang, i) in langs"
        :key="`lang-${i}`"
        :value="lang"
      >
        {{ lang }}
      </option>
    </select>
    <p>{{ $t('lang.notification.msg') }}</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return { 
      // creamos un array con los idiomas que tiene la aplicación
      langs: ['en', 'es'] 
    }
  }
}
</script>