Vue Multi Language Web App with Vue i18n Example

Hello devs, 

In this brand new tutorial, I will discuss vue localization and will show you, how we can create vue i18n switch language button to get our vue js multi-language site. To create this vue js multi-language site, i will use vue I18n. 

Did you know that Vue I18n is an internationalization plugin of Vue.js for creating vue localization. It integrates localization features into your Vue.js Application.  Vue.js offers the possibility to translate a page into several languages ​​via the NPM package 

For creating this vue js multi-language demo application, i will simply use some dummy data with json file and then i will fetch data from local storage. Let's see how we can create this system in our vue js application.

Step 1: Download Vue Cli

The first step, we need vue-cli to download our vue app. So run below command to install it.

npm install -g @vue/cli

Step 2: Download Project and install Vue i18n

In this step, we need to create a project and install Vue i18n to get these features in our application. So run the below command.

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

Then install vue-i18n 

npm install vue-i18n

// or

yarn add vue-i18n

Now update the main.js file like that.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueI18n from 'vue-i18n'
import messages from './lang'

Vue.config.productionTip = false

Vue.use(VueI18n)

export const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})

new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app')

Here the variable  messages should contain our translations. For that, we have to create a lang directory.

src/lang/index.js

import en from './translations/en.json'
import fr from './translations/fr.json'

export default {
    en, hn, fr
}

Update all language file like below:

src/lang/translations/en.json

{
    "hello":"Hello CodeCheef",
    "homePage":"Home Page",
    "aboutPage":"About Page",
    "welcome": "Hello {name}"
}

src/lang/translations/fr.json

{
    "hello":"Bonjour CodeCheef",
    "homePage":"Page d'accueil",
    "aboutPage":"À propos de la page",
    "welcome": "Bonjour {name}"
}

Step 3: Configure Vue Router

In this step, we need to set up our vue router with local storage. In the router, we will check localStorage has language value or not. If don't get any value then we set a default value eng.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import { i18n } from '../main'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to, from, next) => {
  i18n.locale = localStorage.getItem('language') || 'en'
  return next()
})

export default router

Now the most important thing is that we can simply use this syntax to get output.

{{ $t('hello') }}

Step 4: Create Language Switcher

In this step, we will create a language switch button. So update the component like below:

src/components/Language.vue

Now all the steps are done. Run the project to test your first vue js multi-language website.

npm run serve

Read also: Vuex Complete Guide with Axios Api Call in Vue Js

Hope it can help you.