Implementing i18n in Vue.js Using vue-i18n

Today we’ll cover how to implement i18n, internationalization, in our Vue apps. We’ll be using the vue-i18n plugin written by Kazuya Kawaguchi who is one of the core developers working on Vue.js.

Providing internationalization support in our web apps is crucial to allowing them to be consumed by a global audience. While many people around the globe can speak or understand English, by adding i18n support we are opening up our applications to a much wider audience.

App Setup

We’ll start by assuming you’ve already created a simple Vue app. Now we’ll add the vue-i18n plugin using your preferred method:

# Yarn
$ yarn add vue-i18n

# npm
$ npm install vue-i18n

# Vue CLI 3.x+
$ vue add i18n

Below we’ll setup the basic Vue app. You’ll notice we’re just plugging things together without really utilizing the plugin just yet, but this will give you an idea of how our app behaves before adding i18n support.

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');

<template>
  <div id="app">
    <HelloGator />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    HelloGator
  }
}
</script>

<template>
  <div>Hello, Gator</div>
</template>

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

Formatting

The vue-i18n plugin allows for formatting of strings with a simple single-bracket syntax. Here we are adding a messages object which will provide our app with strings that should be translated depending on the current locale. We initialize a new VueI18n instance and pass it to our Vue instance.

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 our app strings in a component, vue-i18n provides the function $t() which will provide a translation based on the current locale for the given key. In this case we’re requesting the message.hello string and providing it with the template variable name.

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

Since we’re defaulting to the en locale, you should see Hello, Gator! rendered on screen.

Changing Locale

Now you’re probably wondering how we can access or change to other locales that we’ve added app strings for. We’ve added support for the German locale de in our initial setup. The vue-i18n plugin provides components with access to the i18n instance through the $i18n variable. Simply set $i18n.locale to switch to a new locale.

Let’s add a component that allows us to switch locale on the fly:

<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>
  <div id="app">
    <SelectLocale />
    <HelloGator />
  </div>
</template>

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

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

Now, after an app reload, you’ll see a <select> element that allows us to change the current locale. Try changing the selected locale to de to see how the rendered output changes to Guten Tag, Gator!.

Wrapping Up

The vue-i18n plugin is an excellent solution to easily add internationalization to our existing Vue apps. It’s an excellent, production-ready library with many features to cover most if not all i18n concerns. As always, make sure to check out the plugin’s documentation to get a feel for all of the features it has to offer.