Vue.js Build Multi-Lingual App Example Tutorial

Hi Guys

Today, I will learn you how to create multiple laguage in Vue.js app, We will show example of vue.js build multi-laguage app.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.

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.

Create Vue Project

In this step,We need to install the vue project using vue CLI, run the following command.

vue create vue-js-multi-laguage

after Get inside the project:

cd vue-js-multi-laguage

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

In this step,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<
    >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<

It Will help you...