Internacionalização de Projeto VueJS com i18n

Nesse post irei demonstrar a configuração inicial do i18n em um projeto VueJS para suportar internacionalização.

Você pode configurar seu projeto com multilinguagem não apenas para internacionalizar idiomas.

Nem sempre precisamos apenas ter nosso projeto em Português e Inglês.

Um recurso que pode ser utilizado seria para separar idiomas regionalmente. Sendo assim, um exemplo simples seria por exemplo, como se chama o pão francês na sua região?

Em vários estados do brasil temos um nome diferente para o pão francês. Sendo assim, se você pode utilizar internacionalização para regionalizar seu sistema.

Agora chega de balela e vamos por a mão na massa.

Instalação do projeto

Caso você não tenha um projeto ou queria criar um novo para testes. Recomendo utilizar o npm para instalar os pacotes do projeto.

Abaixo segue o link da documentação oficial. https://br.vuejs.org/v2/guide/installation.html#NPM

Instalação do i18n no projeto VueJS

Abra a pasta raiz do seu projeto e execute o seguinte comando:

npm i vue-i18n --save

Configurando i18n no projeto VueJS

Cria uma pasta onde irá conter seu arquivo de configuração do i18n e seus arquivos de linguagens.

Agora vamos ajustar o arquivo de configuração (src/i18n/index.js) conforme a seguinte imagem:

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const defaultLanguage = 'en';

const br = require('./pt_br.json');
const en = require('./en.json');
const messages = {br, en};

export default new VueI18n({
    locale: defaultLanguage,
    fallbackLocale: defaultLanguage,
    messages: messages
})

Injetando i18n ao projeto

No arquivo main.js do seu projeto importe a configuração do criada anteriormente.

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

import i18n from './i18n/index';

Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

Utilizando a tradução do i18n

Com todas as configurações anteriores feita, podemos utilizar a tradução.

Processo de utilização de tradução é simples. Vamos utilizar a tradução conforme a imagem abaixo.

Alternando entre as linguagens

Agora precisamos saber como alternar entre os idiomas/linguagens do sistema. Para isso basta seguir os passos da seguinte imagem.

Resultado

No gif a seguir conseguimos ver o resultado do nosso problema.

Você pode conferir o código fonte desse projeto no github.

https://github.com/aluizrech/vue-internationalization

Conforme informado, conseguimos realizar a internacionalização de projeto VueJS com i18n em poucos simples passos.