Internationalization in Vue.js

If you are working on Vue js application and you want to add language support to your application, this blog will explain exactly how you can do it.

Well, there are several approaches to do this

A) Redirect the user to different pages as per language selected

This will give a high level of freedom to customize page according to language but code maintainability will be very low.

B) Use a third-party library like i18n

i18n library is the pretty standard library when it comes to internationalization. Vue-i18n is plugin for Vuejs. It provides various functionalities like Formatting, Pluralization, DateTime localization, Number localization, Hot reloading, etc. It uses key-pair mapping to change the content.

C) Write your own function

Writing a function which will mimic the i18n library is very easy. If your application does not need all the functionality provided by vue-i18n, and you want it to be performant, you should go for writing your own function. Here is the link of bundle size of vue-i18n:v8.15. But future perspective, I will suggest not to go for it as the client’s requirement changes now and then, you will end up writing custom library.

D) You can store translated data at server-side in the database

Most of the application contains data coming from the server which renders on UI as-is. In such cases, you will have to manage internationalization at server-side as well. Using a database to save localized content gives you the benefit of using SQL queries to get data in the required language. Also, hot reloading works out of the box( You just have to make a change in the database, so no need to deploy your application again 😉 ). You can send locale in the header of an API request.

In this blog, we will focus on using Vue-i18n library. Follow the steps

Creating Our Application

We will be creating an application using the Vue CLI. If you already have Vuejs application, then skip this step.

npm install @vue/cli -g

Use this command to create the application:

vue create vuejs-internationalization-app

Choose default preset.

Choose npm package manager as next commands use npm.

Now, lets install vue-i18n package

npm install vue-i18n --save

Now create new file i18n.js and paste following code

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);
const messages = {
  en: {
    helloWorld: 'Welcome to Your Vue.js App',
  },
  fr: {
    helloWorld: 'Bienvenue dans votre application Vue.js'
  },
};

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

Here we are creating new object of VueI18n. Visit this link to know VueI18n in detail.

Pass const i18n to the app component in App.vue

<script>
  import HelloWorld from './components/HelloWorld.vue';
  import {i18n} from './i18n';

  export default {
    name: 'app',
    i18n,
    components: {
      HelloWorld
    }
  };
</script>

Replace text by $t(key) function. t is VueI18n’s function used to fetch message in given locale.

 <template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld :msg="$t('helloWorld')" />
    </div>
</template>

you will notice that colon (:) is added before msg prop. It enables accessing props and data passed from the current and parent component.

And, DONE. Now run npm run serve command to start the server. Hit http://localhost:8080 on the browser. You will see text ‘Welcome to Your Vue.js App’. If you change locale to fr, you will notice that French text will appear on the screen.

Now, lets add dropdown which will change the language from UI. To do so, create component LanguageSelector

<template>
    <select v-model="$i18n.locale">
        <option v-for="language in languages" :key="language.id" :value="language.id">
            {{language.name}}
        </option>
    </select>
</template>

<script>
  import Vue from 'vue';

  export default Vue.extend({
    name: 'LanguageSelector',
    data() {
      return {
        languages: [
          {
            id: 'en',
            name: 'English'
          }, {
            id: 'fr',
            name: 'French'
          }
        ]
      };
    },
  });

</script>

Add it in App.vue

import LanguageSelector from './components/LanguageSelector.vue';

export default {
  name: 'app',
  i18n,
  components: {
    HelloWorld,
    LanguageSelector
  }
};

Add Component in the template of App.vue

<LanguageSelector />

Now you should be able to see dropdown containing two language i.e. English and French. If you select French, content will render french text.

Congratulations, you have successfully added Internationalization support to your application.

Few takeaways from my learning

1. You can use i18n library in component as well. use this.$i18n to access locale and t functions.
2. Use cookie or local storage to save user’s choice of language. It will improve user experience.
3. If you are not using t function in template, your component does not re-render on locale change. In such cases, add empty t function i.e. {{ $t('') }} in your template. This is kind of hack till library gets fixed.
4. Create separate files for each language and add it in messages variable.
5. you can do nesting in messages object. To call: $t('headers.worldMap')

const messages = {
  en: {
    headers: {
      worldMap: 'World Map',
      searchBoxPlaceholder: 'Search by country name',
    },
  },
}

Github link of the code - https://github.com/vinaymahamuni/vuejs-internationalization-app.git

Related blogs:
HOW to implement RTL in your website?
RTL(Right to Left) in the PDF