# 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](https://nodejs.org/en/)
* npm or Yarn package manager
* Vue CLI

## Installation

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

```bash
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

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

#### CN.js

```javascript
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

```javascript
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 the`i18n.js` file as `i18n`.

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

#### main.js

```javascript
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

```javascript
<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

```javascript
<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>
```

{% hint style="success" %}
You can consult the Documentation in [Vue I18n Website](https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting) for more advanced configurations !
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://technical-gitbook.kosontechnology.com/vue/multi-language-using-vue-i18n.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.