Vue I18n is the internationalization plugin of Vue.js. It helps to integrate localization features to your Vue.js Application. Internationalization support is important to allow our webapps to be consumed by a global audience. We can start by creating a simple Vue app. Then add vue-i18n plugin using yarn, NPM or Vue CLI method

# Yarn
$ yarn add vue-i18n

# npm
$ npm install vue-i18n

# Vue CLI 3.x+
$ vue add i18n

To see how our app behaves before adding i18n plugin and after we will first set up our basic Vue app.

Main.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

import App from './App.vue';

Vue.use(VueI18n);

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

App.vue
<template>
  <div id="app">
    <HelloGator />
  </div>
</template>

<script>
import HelloGator from './components/HelloGator.vue'

export default {
  name: 'App',
  components: {
    HelloGator
  }
}
</script>
components/HelloGator.vue
<template>
  <div>Hello, Gator</div>
</template>

<script>
export default { name: 'Gator' }
</script>

Vue-i18n plugin allows for formatting of strings with simple syntax. We are adding a messages object which will give our application a string that should be translated depending on current locale.

Main.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';

import App from './App.vue';

Vue.use(VueI18n);

const messages = {
  en: {
    message: {
      hello: 'Hello, {name}!'
    }
  },
  de: {
    message: {
      hello: 'Guten Tag, {name}!'
    }
  }
};

const i18n = new VueI18n({
  locale: 'en',
  messages
});

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

To use the strings in a component, vue-i18n provides the function $t() which will provide translation based on the current locale. In our example we are requesting the message.hello string and providing it with a template variable name.

components/HelloGator.vue

<template>
  <div>{{ $t('message.hello', { name: 'Gator' }) }}</div>
</template>

To access or change to other locales that we have added app strings for , for instance we have German locale de added in our initial setup. Plugin provides components with access to i18n instances through $i18n variables. Set $i18n.locale to switch to a new locale.

components/SelectLocale.vue

 <template>
  <div>
    <select v-model="$i18n.locale">
      <option
        v-for="(lang, i) in langs"
        :key="`lang-${i}`"
        :value="lang"
      >
        {{ lang }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  name: 'SelectLocale',
  data() {
    return { langs: ['en', 'de'] }
  }
}
</script>

Template: App.vue
<template>
  <div id="app">
    <SelectLocale />
    <HelloGator />
  </div>
</template>

Script: App.vue

import HelloGator from './components/HelloGator.vue'
import SelectLocale from './components/SelectLocale.vue'

export default {
  name: 'App',
  components: {
    HelloGator,
    SelectLocale
  }
}