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: