Vue JS Internationalization

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Setting up Paddle with NextJs — Step By Step Guide [2022]

React & Redux Terminology

Migrating to Angular 5: 5 reasons why & 3 simple ways to do it

Emerald-UI Version 1.4.0

SideBar menu in React with material UI

Null vs undefined

How To Develop and Build MEAN Stack

UFC — The Ultimate Frontend Catch up (1)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Santhoshkumar Ravi

Santhoshkumar Ravi

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

More from Medium

Complete Guide Vue 3 — Composition API

SOLID Principles In Vue 2 Components

How we use Composition API as Vuex alternatives

How to filter todo items? Vue 3 Composition API