Vue 2 i18n Tutorial- How To Build Multi-Lingual Vue App

In this Vue 2 i18n tutorial, we will get to know how to translate the Vue.js app in multi-language using the vue-i18n plugin.

By adding this feature of multi-language. we can make our apps reach innumerable people in different parts of the world. This feature helps to overcome the barriers of language.

In this tutorial, we will learn to add this internalization by taking the benefit of the i18n plugin to add multiple language support in our Vue applications.

 

Let’s learn in detail now how to add support for English, Belarusian, Danish and Croatian languages. We will be starting it from scratch using Vue CLI and the vue-i18n plugin:

 

Step 1- Setup Vue App

Step 2- Add Vue-i18n Plugin In Vue

Step 3- Create Multi-Language Component

Step 4- Define Translation In Vue

Step 5- Create Language Switcher In Vue

Step 6- Conclusion

 

Step 1- Setup Vue App

The very basic step for starting with the implementation is just to install the Vue CLI on our development system:

npm install -g @vue/cli

 

Further, we create a new  Vue project and get inside the project folder:

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

 

 

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

 

To remove the above error for invoking the app, do remember to update the “scripts”: [] array in the package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

 

Now, we have to run the app:

npm run serve

 

Step 2- Add Vue-i18n Plugin In Vue

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

npm install vue-i18n

 

It might be already known to some of us that the Vue i18n is quite a popular internalization plugin for vue.js and it immediately integrates localization features to our Vue.js application.

Further, we need to add the vue-i18n plugin in our Vue.js app for which we will import the vue-i18n package 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')

 

Step 3- Create Multi-Language Component

Here, in this step, we will see how to create components/multilingual.vue file and add the given code to 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 instances. We can initiate the $t instance. This allows us to use mustache syntax {{}} in the Vue template. the $t is executed whenever re-render occurs. So, it does not have translation costs.

 

Step 4- Define Translation In Vue

Firstly, we will install the Vue router in the Vue project:

npm add vue-router@^3.1.6

 

We can easily format the strings with the help of the vue-i18n module with brackets syntax. We defined the messages object in four international languages. This object translates the Vue app based on the selected locale.

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

Then, we have to add the below 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')

 

Step 5- Create Languages Switcher In Vue

Afterward, we will 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 can take the help of the 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 on the home page, we will add the given 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>

 

Conclusion

So, we have reached the end of this Vue i18n tutorial in which we have learned the Vue internalization. We have seen how to create a multilingual Vue app with the help of the vue-i18n plugin.

 

Thanks