If you are building up an application which would be used by multilingual customer then this blog post is something interesting for you…

I assume that you have created an vue.js application .. lets jump in to the plug-ins that are needed to support multi-lingual

For this blog, I am taking the default vue.js app and making it support multiple language.

About plugin ,

Vue-i18n Plugin

we will use the vue-i18n plugin for internationalization. Let’s add this plugin to our application.

npm install vue-i18n --save

FYI, this will add vue-i18n to your dependency in package.json

Now that we have the plug-in installed, lets make vue instance to make use of it.

Import the plug-in and make it available in vue instance

import Vue from 'vue'import App from './App.vue'// Vue-i18n pluginimport i18n from './i18n/i18n'; // relative path to your i18n fileVue.config.productionTip = falsenew Vue({i18n,render: h => h(App),}).$mount('#app')

Our next step is to create a translation file for the supported languages. Lets take two languages into use case..

create a file i18n.js where you would like to store the language contents, in our case we would like to support the welcome message in English and Dutch.

Now that we have the supported language text, lets see how to toggle between the language

changeLanguage takes the locale user wants to switch and sets i18n.locale with the user selected locale.

When user clicks on Dutch, then the user interface will render with the welcome message in dutch ,

Also in html you have to use <h1>{{ $t(welcomeMsg)}}</h1> where $t() refers that you are getting this message from translate.

Conclusion, if you application supports multilingual then with the help of vue-i18n, you can achieve the multilingual support.

Filters comes handy when you want to do any common text formatting. For example, you want to show First Name and Last Name of a user in Capital Case or Show just First 100 characters of a paragraph.

Happy Coding!!

Front End Engineer | Netherlands. They say being human means having doubts yet still continuing on your path, so as I am. www.santhoshkumar.tech