Internacionalização no Vue.js 3 com Vue-i18n

Uma solução para trabalhar com vários idiomas e um script para converter planilhas em arquivos de tradução.

This image has an empty alt attribute; its file name is image-24-1024x625.png
Resultado final dessa publicaçã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”

Lá estão nossas bandeirinhas funcionando!

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:

https://github.com/davidaug/projeto-i18n