How implementation a i18n in Vue 3
Tags: vue, vue3, i18n, hacktoberfest
Published: 2022-10-10 12:39:54

---
title: How implementation a i18n in Vue 3
published: true
description: This article is about implementation i18n in a Vue 3 with vue-i18n
tags: vue, vue3, i18n, hacktoberfest
# cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3i4otxhxavbgqzf3rog.jpg
# Use a ratio of 100:42 for best results.
---

## First install library

You need install lib of vue-i18n@9

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

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

```js
import i18n from './i18n';
```

## Example with main.js with import
Next example with implementation import in your Vue with `.use(i18n())`

```js
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
```json
{
  "languages": {
    "pt": "Portuguese",
    "en": "English",
    "es": "Spanish"
  },
  "title": {
    "config": "Configuration"
  }
}
```

name file: locales/pt.json
```json
{
  "languages": {
    "pt": "Português",
    "en": "Inglês",
    "es": "Espanhol"
  },
  "title": {
    "config": "Configurações"
  }
}
```

name file: locales/es.json
```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

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

## References
If do you need refences follow the list below with more examples
- The official site [vue-i18n](https://vue-i18n.intlify.dev/guide/installation.html)
- A project working with real implementation [Google Vue](https://github.com/lucasferreiralimax/google-vue)
- My profile in Github [@lucasferreiralimax](https://github.com/lucasferreiralimax)

## Do you need help?
Comment or talk with me
I feel like help you and nice to meet you.