Tutorial

Implementing i18n in Vue.js Using vue-i18n

Published on March 28, 2020
Default avatar

By Jim Toth

Implementing i18n in Vue.js Using vue-i18n

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

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>

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.

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 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: components/HelloGator.vue
<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:

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

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Jim Toth

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel