How to Create Multilingual Vue.js apps

What is Vue.js?

Vue .js is an open-source model - view - ViewModel front-end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members.

What is Vue i18n?

Vue I18n is an internationalization plugin of Vue.js. It easily integrates some localization features into your Vue.js Application.

Vue.js offers the possibility to translate a page or app into several languages via the NPM package vue-i18n . Language files containing the translations are used for this purpose and output to the user in the desired language.

In this blog, we are going to learn how to translate the Vue.js app in multi-language using the vue-i18n plugin.

Install Node.js + View CLI
Create Project and install Vue i18n
Integrate Vue i18n and load language files
Configure Router
Output translations
Change language
Installing language switching

Install Node.js + View CLI

You can find a blog that is related to How to Install Node.js and NPM On Ubuntu 20.04 . You can check this out.

In this Vue Multilingual Blog we are going to utilize a special CLI so be sure to install it as follows:

npm install -g @vue/cli

Or you can read this guide from the developers: https://cli.vuejs.org/guide/installation.html

Create Project and install Vue i18n

Create a new Vue project and get inside the project folder

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

Integrate Vue i18n and load language files

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 manager we prefer:

npm install vue-i18n

// or

yarn add vue-i18n

You will be asked some questions regarding the project setup. I've provided the following answers:

The locale of project localization - en
The fallback locale of project localization - ru (you may choose any other language)
The directory where store localization messages of a project - locales
Enable locale messages in Single file components - N

Here you can see the main.js file of your app. We have to add the marked lines to include vue-i18n. You can set the variables locale and fallbackLocale to the language code of your default language.

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')

The variable messages should contain our translations. For this, we have to create a long directory.

In the index.js we import all language files in which our page should be available.

src/lang/index.js

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

export default {
    en, hn, fr
}

The JSON files in the translations subfolder contain the translations for the respective language.

src/lang/translations/en.json

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

src/lang/translations/hn.json

{
    "hello":"हैलो टेकवब्लॉग्स",
    "homePage": "होम पेज",
    "aboutPage":"पेज के बारे में",
    "welcome": "हैलो {name}"
}

src/lang/translations/fr.json

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

Configure Router

With the previous configuration, we could now output our translated texts.

In the router, we are check localStorage has language value or not. If don't get any value then we set a default envalue.

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

Output translations

Now the most important thing: The output of the texts. For this we can simply use this syntax:

<h1>{{ $t('hello') }}</h1>

The string in brackets is the key from the JSON translation file. And that's all.

In the dynamic text, you just pass an object with a name like this:

<h1>{{ $t('welcome',{name:"TechvBlogs"}) }}</h1>

Change language

In the code, we can also change the language manually. We simply enter the new language code. With the variable this.$i18n we also have access to the current language. This is available globally in your Vue.js app.

this.$i18n.locale = 'en';

Installing language switching

We now want to give our visitors the opportunity to choose between the available languages. Here is an example of the code for a language switch.

src / components / Language.vue

<template>
    <select v-model="$i18n.locale" @change="changeLanguage">
        <option value="en">English</option>
        <option value="hn">Hindi</option>
        <option value="fr">French</option>
    </select>
</template>

<script>
export default {
    methods:{
        changeLanguage(obj){
            localStorage.setItem('language',obj.target.value)
        }
    }
}
</script>

Now run project