How to Build Multi Language App in Vue.js

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 utilizing the vue-i18n plugin.
Integrating internationalization support in the web application is auxiliary for the audience that visits our site from the sundry part of the world. Since the people in the world use variants of languages, so, it becomes compulsory for us to accommodate our site content in the same language they verbalize.

Fortuitously, we can take benefit of i18n support to integrate multiple language support in our vue application; this way, we can facilely engage an immensely colossal number of audience.

We will engender a pretty rudimentary multilingual vue app from scratch utilizing vue cli and vue-i18n plugin. We will learn to integrate 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>

i hope you like this article.