Gerenciando idiomas no Vue

Temos um mundo cada vez mais conectado, em alguns lugares, o número de dispositivos ultrapassam o de habitantes. Esses dispositivos, por sua vez, têm o objetivo exclusivo de nos trazer informações, essas são apresentadas em idiomas, muitas vezes no inglês, mas em um planeta com diversos idiomas, é um diferencial disponibilizar dados em vários deles.

Entrando no ramo de desenvolvimento, com um sistema que disponibiliza dados em diversos idiomas podemos expandir o nosso alcance, além disso deixar o cliente orgulhoso pelo trabalho bem feito.

Na prática, nem sempre isso é tão lindo, ás vezes é bastante trabalhoso criar sistemas com suporte a mais de uma linguagem, visando isso criei um plugin para o Vue, com o objetivo de suprir essa necessidade de uma forma simples e rápida.

O vue-multilanguage disponibiliza uma variável indicando qual o idioma atual do sistema, ao ter o valor dessa variável modificado, a diretiva v-lang é executada, por sua vez atualizando todos componentes. Vide a figura abaixo:

Funcionamento do vue-multilanguage

Nesse artigo vamos fazer um pequeno exemplo que usa esse plugin, iremos criar uma aplicação composta por três componentes, o Perfil que irá mostrar dados do usuário, Painel que mostrará a quantidade de amigos que o usuário tem, e o nosso querido App.

Para isso, com um projeto já criado, vamos instalar nosso plugin via NPM, com o comando:

npm install vue-multilanguage --save  

O próximo passo é registrar o plugin globalmente no Vue, porém ele recebe um objeto que representa nossas linguagens, então no main.js, iremos além de registra-lo passar esse objeto, deixando-o assim:

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

import VueLanguage from 'vue-multilanguage'

Vue.use(VueLanguage, {  
    en: {
        perfil: {
            descricao: 'Your name is {nome} and you have {idade} years',
        },
        amigos: 'You have {0} friends'
    },
    pt: {
        perfil: {
            descricao: 'Seu nome {nome} e você tem {idade} anos',
        },
        amigos: 'Você tem {0} amigos'
    },
})

new Vue({  
  el: '#app',
  render: h => h(App)
})

Note que dentro do objeto temos diversos outros objetos, primeiramente definimos nossas linguagens — en e pt no exemplo — após isso, declaramos quais mensagens teremos, vejam que dentro dessas mensagem podemos declarar parâmetros.

Ao colocar {} em mensagens, o vue-multilanguage interpretará isso como parâmetros, quando se tem mais de um, você obrigatoriamente deve dar um nome a ele, quando temos apenas um podemos defini-lo como zero.

Agora para usar o plugin podemos apenas fazer uso de sua diretiva v-lang, passando como modificadores o caminho completo da mensagem a ser exibida, como valor enviaremos os parâmetros, caso exista algum na mensagem.

Para testar, vamos criar o componente Perfil que exibe a mensagem de descricao, temos de enviar um parâmetro pra essa diretiva, pois a mensagem recebe os parâmetros nome e idade, então passamos um usuário registrado no nosso data com esses atributos. Deixando nosso componente assim:

<template>  
    <div>
        <h3 v-lang.perfil.descricao="usuario"></h3>
    </div>
</template>

<script>  
export default{  
    name: 'lv-perfil',
    data() {
        return {
            usuario: {
                nome: 'Leonardo Vilarinho',
                idade: 20
            }
        }
    },
}
</script>  

Vamos também criar o componente Painel, nele iremos importar o componente de Perfil e exibir a mensagem amigos, como ela recebe um único parâmetro podemos passa-lo diretamente, assim:

<template>  
    <div>
        <lv-perfil></lv-perfil>
        <h4 v-lang.amigos="5"></h4>
    </div>
</template>

<script>  
import LvPerfil from './Perfil.vue'  
export default{  
    name: 'lv-painel',
    components: {LvPerfil}
}
</script>  

E por fim, no App vamos importar o componente Painel para que possamos de fato ver tudo funcionando:

<template>  
  <div id="app">
    <lv-painel></lv-painel>
  </div>
</template>

<script>  
import LvPainel from './Painel.vue'  
export default {  
  name: 'app',
  components: {LvPainel}
}
</script>  

Ao executar tudo com o npm run dev provavelmente você verá as mensagens em português, algo como:

Seu nome Leonardo Vilarinho e você tem 20 anos

Você tem 5 amigos

Isso se deve ao fato do plugin exibir por padrão o idioma nativo do navegador. Caso queira mudar o idioma do seu sistema, basta em qualquer componente trocar o valor da variável $language, para testar coloque esse código em qualquer componente que use a diretiva v-lang:

<button @click='$language = "pt"'>PT</button>  
<button @click='$language = "en"'>EN</button>  

Com isso, ao clicar nos botões você verá o seu sistema inteiro trocando de idioma em tempo real.

E com isso finalizamos o artigo, caso queira contribuir com o plugin basta entrar no repositório do GitHub. Até a próxima!