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:

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

Registrando idiomas e plugin

Por padrão o plugin deve receber um objeto com atributos que permitem algumas configurações:

• o atributo default indica o idioma padrão do sistema, caso não seja informado irá entender que a linguagem do navegador é a padrão, e por último caso, irá definir o primeiro objeto de linguagem declarado como padrão (en nesse exemplo).

• os atributos de linguagem, seguindo padrão de dois caracteres, são objetos que englobam todas mensagens que o idioma irá ter, como exemplo a frase titulo.

Veja o exemplo a seguir:

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

import VueLanguage from 'vue-multilanguage'

Vue.use(VueLanguage, {
        default: 'pt',
	en: {
                titulo: 'My website',
	}
})

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

O código de exemplo foi criado no arquivo main.js, para já registrar o plugin na aplicação Vue.

Notem que temos algumas chaves ({}) 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.

Usando idiomas no template

Agora para usar o plugin em um template, 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, como nós não temos a mensagem descricao definida globalmente no plugin, podemos declara-la no atributo messages do componente deixando-a como local.

Essa mensagem receberá dois atributos, nome e idade, então na diretiva passamos um objeto com esses valores para serem substituído na mensagem:

<template>
	<div>
        <h1 v-lang.titulo>Meu site</h1>
		<h3 v-lang.descricao="usuario">
            Seu nome {nome} e você tem {idade} anos
        </h3>
	</div>
</template>

<script>
export default{
	name: 'lv-perfil',
    messages: {
	    en: {
	        descricao: 'Your name is {nome} and you have {idade}
	    }
	}
	data() {
		return {
			usuario: {
				nome: 'Leonardo Vilarinho',
				idade: 20
			}
		}
	},
}
</script>

Note que como declaramos o idioma pt como padrão, não precisamos ter a declaração programática de suas mensagens, basta colocadas diretamente no template para termos o mesmo resultado, mas lembre-se, isso funcionará apenas para quando usarmos o default.

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">
            Você tem {0} amigos
        </h4>
	</div>
</template>

<script>
import LvPerfil from './Perfil.vue'
export default{
	name: 'lv-painel',
	components: {LvPerfil},
    messages: {
	    en: {
	        amigos: 'You have {0} friends'
		}
    }
}
</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

Uso programático

O plugin não trabalha somente com a diretiva, caso queira traduzir uma mensagem no próprio javascript use o método global translate para definir uma propriedade computada com o valor da mensagem traduzida para o idioma ativo:

computed: {
	welcome()  {
		return this.translate(this.$language, 'nome-mensagem', 'parametros')
	}
}

Alterando linguagem do sistema

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!