Uma solução para trabalhar com vários idiomas e um script para converter planilhas em arquivos de tradução.
Vou apresentar nesse post uma solução rápida e prática para internacionalização no Vue.js, com a biblioteca Vue-i18n (https://vue-i18n.intlify.dev/). Também vou fornecer um script que eu fiz em python, para converter arquivos csv em json para as traduções.
Eu não utilizo a Composition API do Vue ainda, então vamos de maneira antiga mesmo.
Todo o código do projeto estará nesse repositório: https://github.com/davidaug/projeto-i18n
Configuração do Projeto
No primeiro passo vamos criar um projeto zerado:
> vue create projeto-i18n
> Opção: Default(Vue 3)
Criado o projeto, vamos instalar o Vue I18n:
npm install vue-i18n@next –save
Após a instalação do Vue I18n, vamos fazer a configuração dele. Para esse projeto, eu criei uma pasta dentro da src com o nome de i18n, onde deixei o arquivo de configuração e também é possível deixar os arquivos de tradução.
Dentro da pasta i18n, vamos criar um arquivo chamado index.js onde vamos configurar nossos arquivos de tradução.
import { createI18n } from 'vue-i18n';
const messages = {
en : {
},
br: {
},
es: {
}
};
const i18n = createI18n (
{
locale: "br",
fallbackLocale: "en",
messages
}
);
export default i18n;
Dentro desse arquivo, temos 3 linguagens: Inglês (en), Português Brasil (br) e Espanhol (es).
E logo abaixo é feita a criação do objeto de configuração, definindo o br como linguagem principal (locale), e o en caso alguma tradução não seja encontrada no português. (fallbackLocale).
O próximo passo é injetar o i18n na nossa aplicação, para isso, vamos configurar o nosso main.js
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';
createApp(App)
.use(i18n)
.mount('#app');
Configurado na nossa aplicação, vamos começar a usar de fato!
Utilização do Vue-I18n
O Vue I18n traduz as strings a partir do objeto “messages”, que foi criado anteriormente no arquivo de configuração. Eu particularmente prefiro deixar as strings como são, ao invés de criar chaves.
Por exemplo:
en: {
"Hello World" : "Hello World"
},
br: {
"Hello World" : "Olá Mundo"
}
Ao invés de:
en: {
"message.hello" : "Hello World"
},
br: {
"message.hello" : "Olá Mundo"
}
Mas é claro que essa decisão fica da maneira que você preferir.
Vou utilizar a própria página que o Vue Cli cria, para utilizar o Vue-I18n.
Essa página recebe uma mensagem num prop: “Welcome to Your Vue.js App” , então vou configurar essa mensagem no nosso arquivo “i18n/index.js“:
import { createI18n } from 'vue-i18n';
const messages = {
en : {
"Welcome to Your Vue.js App": "Welcome to Your Vue.js App"
},
br: {
"Welcome to Your Vue.js App": "Bem vindo ao seu App Vue.js"
},
es: {
"Welcome to Your Vue.js App": "Bienvenido a su aplicación Vue.js "
}
};
Para traduzir as strings, o Vue-I18n fornece a função “$t(string)“, vamos alterar no nosso “components/HelloWorld.vue“:
Feito isso, vamos rodar nosso projeto!
npm run serve
Aí está, e ele já traduziu para nossa linguagem definida como padrão.
Mas agora, vamos criar uma forma de trocar a linguagem quando o usuário quiser.
Alternando as linguagens
Vamos criar um componente na pasta “components” chamado “ChangeLocale.vue” e utilizar um CSS de um CDN com as bandeiras dos países.
Dentro desse componente, vamos também criar uma função que altera o locale do Vue-i18n:
<template>
<div>
<span @click="changeLocale('br')" class="flag-icon flag-icon-br m-2"></span>
<span @click="changeLocale('en')" class="flag-icon flag-icon-us m-2"></span>
<span @click="changeLocale('es')" class="flag-icon flag-icon-es m-2"></span>
</div>
</template>
<script>
export default {
methods: {
changeLocale(locale){
this.$root.$i18n.locale = locale;
}
}
}
</script>
<style scoped>
.m-2{
margin: 2px;
}
@import "https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css";
</style>
E já colocamos esse componente no nosso “HelloWorld.vue”
Vamos traduzir tudo agora!
Vue-I18n funcionando, componente que troca a linguagem também, vamos traduzir toda essa página.
Ficar criando isso tudo no json é um saco, então criei um script em python que transforma um csv em arquivos json, logo podemos criar um arquivo de tradução no Excel ou nas planilhas do Google:
A primeira linha são nossos locales, e a primeira coluna (no caso en) são as strings base para a tradução. Exporte para CSV e no meu caso, criei uma pasta na raíz do projeto, para receber esse arquivo:
Dentro da pasta criada, também já coloquei o script python (está no repositório):
Adapte o Script para a sua necessidade e execute:
O script já cria um arquivo por linguagem:
Devemos copiar e colar esses arquivos para nossa pasta “i18n” e importá-los no nosso “index.js“:
const messages = {
en : require('./en.json'),
br: require('./br.json'),
es: require('./es.json')
};
E para finalizar, é só chamar a função “$t()” nas strings dentro da nossa página “HelloWorld.vue”
E lá está nossa página traduzida:
É possível também, chamar o método $t em métodos, por exemplo:
} catch (err) {
this.error = this.$t(err.message) || this.$t('Failed to authenticate, try later');
}
Todos os códigos utilizados estão em um repositório no Github:
