Primeiro instale a biblioteca

Você precisa instalar a lib do vue-i18n@9

npm install vue-i18n@9 --save

Crie o arquivo de configuração nos seus arquivos src do Vue App

Arquivo com o nome i18n.js e este conteúdo abaixo

import { nextTick } from 'vue';
import { createI18n } from 'vue-i18n';

let i18n;

export const SUPPORT_LOCALES = ['pt', 'en', 'es'];

export function setI18nLanguage(locale) {
  loadLocaleMessages(locale);

  if (i18n.mode === 'legacy') {
    i18n.global.locale = locale;
  } else {
    i18n.global.locale.value = locale;
  }

  document.querySelector('html').setAttribute('lang', locale);
  localStorage.setItem('lang', locale);
}

export async function loadLocaleMessages(locale) {
  // carrega mensagens de localidade com importação dinâmica
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  );

  // define localidade e mensagem de localidade
  i18n.global.setLocaleMessage(locale, messages.default);

  return nextTick();
}

export default function setupI18n() {
  if(!i18n) {
    let locale = localStorage.getItem('lang') || 'pt';

    i18n = createI18n({
      globalInjection: true,
      legacy: false,
      locale: locale,
      fallbackLocale: 'pt'
    });

    setI18nLanguage(locale);
  }
  return i18n;
}

Importe este arquivo i18n.js no seu main.js do Vue

Use este import do arquivo i18n.js na configuração do App

import i18n from './i18n';

Exemplo com main.js com import

Próximo exemplo com implementação de import no seu Vue com .use(i18n())

import { createApp } from 'vue'

import App from './App.vue'

import i18n from './i18n';

createApp(App)
  .use(i18n())
  .mount('#app')

Está ótimo, agora você precisa criar seus arquivos de tradução e usar nos seus componentes

Crie Arquivos de localidades traduzidas

Na pasta src você precisa criar esta pasta com o nome locales e na pasta locales você cria todos os arquivos json com nome de exemplo en.json ou pt.json ou es.json com suas ocorrências de tradução seguindo este exemplo json abaixo

nome do arquivo: locales/en.json

{
  "languages": {
    "pt": "Portuguese",
    "en": "English",
    "es": "Spanish"
  },
  "title": {
    "config": "Configuration"
  }
}

nome do arquivo: locales/pt.json

{
  "languages": {
    "pt": "Português",
    "en": "Inglês",
    "es": "Espanhol"
  },
  "title": {
    "config": "Configurações"
  }
}

nome do arquivo: locales/es.json

{
  "languages": {
    "pt": "Portugués",
    "en": "Inglés",
    "es": "Español"
  },
  "title": {
    "config": "Configurações"
  }
}

Muito bom, arquivos com traduções inglês, português e espanhol

Agora use sua tradução em componentes

Agora você precisa usar a tradução no componente e criar um select ou botão para mudar o idioma da localidade com o hook global useI18n

Um exemplo básico de uso no componente com um select para mudança de idioma

<script setup>
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { SUPPORT_LOCALES as supportLocales, setI18nLanguage } from '../i18n';

const { locale } = useI18n({ useScope: 'global' });
watch(locale, (val) => {
  setI18nLanguage(val);
});
</script>

<template>
  <h1>{{ $t('title.config') }}</h1>
  <select class="App-language" v-model="locale">
    <option
      v-for="optionLocale in supportLocales"
      :key="`locale-${optionLocale}`"
      :value="optionLocale">{{ optionLocale }}
    </option>
  </select>
</template>

Pronto, você é um bom hacker e seu Vue 3 tem internacionalização com vários idiomas e acesso internacional para muitas pessoas em todo o mundo. Bons estudos e um ótimo #hacktoberfest

Referências

Se precisar de referências, siga a lista abaixo com mais exemplos

• O site oficial vue-i18n
• Um projeto funcionando com implementação real Google Vue
• Meu perfil no Github @lucasferreiralimax

Precisa de ajuda?

Comente ou fale comigo Tenho prazer em ajudar você e prazer em conhecê-lo.