MULTI-LANGUAGE USING VUE-I18N

Vue I18n is a popular internationalization (i18n) library and progressive JavaScript framework for Vue.js.

Internationalization is the process of designing and adapting a software application to support multiple languages and regions.

Prerequisites

Before you get started, ensure that you have the following prerequisites installed on your system:

• Node.js v20.9.0 or above

• npm or Yarn package manager

• Vue CLI

Installation

The following is the required client library that needed to be installed:

npm install vue-i18n

Install Vue I18n package from the npm registry to project's node_modules directory, and make it available for use in JavaScript code.

Set up vue-i18n

Step 1 : Create Language files and folder

Create a folder named Language to store the language JavaScript file

Next, Create language JavaScript files inside the Language folder act as dictionary to store translation words for different languages.

For example, Chinese and English as two supported languages.

EN.js

export default {
    loginPage: {
        title: 'Database System',
        companyName: '©Koson Technology',
        fillFormError: 'Please input Company ID, Username and Password',
    }
}

CN.js

export default {
    loginPage: {
        title: '数据平台',
        companyName: '©高成科技',
        fillFormError: '请填写公司编号, 用户名和密码',
    }
}

Step 2 : Set up vue-i18n

Create a file name i18n.js to set up vue-i18n

i18n.js

import { createI18n } from 'vue-i18n';

import en from './Language/EN.js';
import cn from './Language/CN.js';

const messages = {
  en,
  cn,
};

const i18n = createI18n({
  locale: 'en', //Default English
  messages,
});

export default i18n;

Step 3 : Initialize vue-i18n

Inside main.js file, import thei18n.js file as i18n.

Then, set the Vue app use the vue-i18n plugin

main.js

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

createApp(App).use(i18n).mount('#app')

Now, we can use the vue-i18n in our Vue app !

Example of Vue i18n Usage

Example 1 : Use in HTML

loginPage.vue

<div class="title">
    <h1>{{ $t('loginPage.title') }}</h1>
    <h2>{{ $t('loginPage.companyName') }}</h2>
</div>

{{ $t('loginPage.title') }}:

• This expression uses the $t directive to access and display a translated message.

• The argument 'loginPage.title' refers to a specific translation key.

• Vue I18n will replace this key with the appropriate translated text based on the current locale set in the application.

{{ $t('loginPage.companyName') }}:

• Similar to the first expression, this one accesses the translation message associated with the key 'loginPage.companyName' and displays it in the component.

Example 2 : use in Script tag

Sometime we need the translation word as message inside the method in <script> tag.

Here is the way on how to use vue-i18n:

loginPage.vue

<script>
export default {
    //... other codes before methods
    methods: {
        login(){
            if (this.username === '' || this.password === '' || this.cpid === '') {
                this.errorMessage = this.$i18n.t('loginPage.fillFormError');
                return;
            }
        },
        // ... remaining code 
    }
}
<script>

You can consult the Documentation in Vue I18n Website for more advanced configurations !