How implementation a i18n in Vue 3

#vue #vue3 #i18n #hacktoberfest

First install library

You need install lib of vue-i18n@9

npm install vue-i18n@9 --save

Create the config file in your src files Vue App

File with name i18n.js and this content below

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) {
  // load locale messages with dynamic import
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  );

  // set locale and locale message
  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;
}

Import this file i18n.js in your main.js of Vue

Usage this import file i18n.js in your config App

import i18n from './i18n';

Example with main.js with import

Next example with implementation import in your Vue with .use(i18n())

import { createApp } from 'vue'

import App from './App.vue'

import i18n from './i18n';

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

it's good, now you need create your translate files and usage in yours components

Create Files of translate locales

In src folder do you need create this folder with name locales and in locales folder you create all json file with name example en.json or pt.json or es.json with your translate file ocurrences follow this example json below

name file: locales/en.json

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

name file: locales/pt.json

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

name file: locales/es.json

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

Very good files with translates english, portuguese and spanish

It's now use your translate in components

Now do you need usage translate in component and create this a select or a button for changing language of locale with hook global useI18n

A example basic use in component with a select change of language

<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>

Finished you are a good hacker and your Vue 3 have a internalization with a lot languages and international access for many peoples in all the World, Good study for you and a nice #hacktoberfest