Vue i18n Tutorial – How to Build Multi-Lingual Vue.js App

Last updated on by Digamber
This is a step by step Vue i18n tutorial, In this tutorial, we are going to learn how to translate the Vue.js app in multi-language using the vue-i18n plugin.

Vue i18n Tutorial Example

Adding internationalization support in the web application is helpful for the audience that visits our site from the various part of the world. Since the people in the world use different types of languages, so, it becomes necessary for us to serve our site content in the same language they speak.

Luckily, we can take benefit of i18n support to add multiple language support in our vue application; this way, we can easily engage a large number of audience.

We will create a pretty basic multilingual vue app from scratch using vue cli and vue-i18n plugin. We will learn to add support for English, Belarusian, Danish and Croatian.

Setup Vue App

Install Vue CLI to get started with Vue app development.

npm install -g @vue/cli

# or 

yarn global add @vue/cli

Create a new vue project and get inside the project folder:

vue create vue-i18-app && cd vue-i18-app

Run the vue app.

npm run serve

Add Vue-i18n Plugin in Vue

We have set up the vue project, and now we have to install the vue-i18n plugin using either of the command based on the package manger we prefer:

# npm
npm install vue-i18n

# Yarn
yarn add vue-i18n

Vue I18n is quite popular internationalization plugin for Vue.js, and It quickly integrates localization features to your Vue.js application.

It is created by kazuya kawaguchi, and you can check the official documentation of this plugin here.

Now, we have to add the vue-i18n plugin in our vue.js app, so import the VueI18n package in in the main.js file.

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

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

Create Multi-Language Component

Create components/Multilingual.vue file and add the following code in it.

<template>
  <div>
    {{ $t('message.value', { value: 'This is an example of content translation' }) }}
  </div>
</template>

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

We define the default English message value in the $t instance. We can initiate the $t instance. This allows us to use mustash syntax {{}} in the vue template. The $t is executed whenever re-render occurs, so it does have translation costs.

Define Translations in Vue

We can easily format the strings with the help of vue-18n module with bracket syntax. We defined the messages object with four international languages; this object translates the vue app based on selected locale.

We also have to initialize the VueI18n instance by adding the values that we defined in the messages object.

Add the following code in the main.js file.

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const messages = {
  en: {
    message: {
      value: 'This is an example of content translation.'
    }
  },
  be: {
    message: {
      value: 'Гэта прыклад перакладу змесціва.'
    }
  },
  da: {
    message: {
      value: 'Dette er et eksempel på oversættelse af indhold.'
    }
  },
  hr: {
    message: {
      value: 'Ovo je primjer prevođenja sadržaja.'
    }
  }
};

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

Vue.config.productionTip = false

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

Create Language Switcher in Vue

Create components/SwitchLanguage.vue file here we define the following code.

We have to add a language switcher, and we can add it by creating a simple select dropdown. This switcher allows us to change the language in our vue app, and we take the help of i18n instance via $i18n.locale.

The above code will create a dropdown with the following values, ‘en’, ‘be’, ‘da’, ‘hr’.

<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: 'SwitchLocale',
  data() {
    return { langs: ['en', 'be', 'da', 'hr'] }
  }
}
</script>

<style>
select {
    width: 150px;
    line-height: 49px;
    height: 38px;
    font-size: 22px;
    outline: 0;
    margin-bottom: 15px;
}
</style>

To call the components in the home page just add the following code in the Home.vue app.

<template>
  <div>
    <SwitchLanguage />
    <Multilingual />
  </div>
</template>

<script>
  import Multilingual from '@/components/Multilingual.vue'
  import SwitchLanguage from '@/components/SwitchLanguage.vue'

  export default {
    name: 'Home',
    components: {
      SwitchLanguage,
      Multilingual
    }
  }
</script>

Summary

Finally, we have completed the Vue internationalization tutorial; In this tutorial, we learned how to create a multilingual vue app with the help of the vue-i18n plugin.

You can download the full code of this tutorial from GitHub.