Internacionalización con Vue-i18n

La internacionalización o traducción de sitios Web, es otra de las características importantes que nos facilita un Framework de desarrollo. Veamos como utilizar el plugin de internacionalización Vue-I18n en tu app de Vue.

Instalación

Para empezar, asumiremos que tienes previamente configurada tu app, instalamos vue-i18n usando npm.

$ npm install vue-i18n --save

Estructura de proyecto

Crea un carpeta lang en donde configuraremos Vue-i18n y en donde tendremos los archivos json de cada una de las traducciones.


Configuración de Vue-i18n

Creamos nuestros archivos json.

Creamos nuestra instancia de Vue-i18n

Y por último agregamos nuestra instancia a nuestra main app (main.js)

Listo!!! Ahora a probarlo en nuestro Componente con la siguiente etiqueta:

// HTML Part
<div>{{ $t('lang.notice.msg') }}</div> // ó
<div v-bind:title="$t('lang.notice.msg')"></div>

Al correr nuestra app nos debera mostrar lo siguiente:

<div>You have message</div>

Si cambiamos locale a ‘es’, y recargamos se mostrará lo siguiente:

<div>Tienes un mensaje</div>