
#### Table of Contents

1. Install vue-i18n
2. Setup vue-i18n
3. Use vue-i18n at view, *.Vue file
4. Move to Module
5. Use vuei18n

# Use vue-i18n at Vue

## Install `vue-i18n`

Install to the different section of the package.json.

```
// for just install vue-i18n to node.js node module
npm install vue-i18n
// or install to dependencies section of package.json
npm install vue-i18n --save
// or install to devDependencies section of package.json
npm install vue-i18n --save-dev
// or install to optionalDependencies section of package.json
npm install vue-i18n --save-optional
```

## Setup `vue-i18n`

First, use the vue-i18n

```
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
```

setup localized text.

```
const local= {
  en: {
      hello: 'hello'
  },
  ja: {
      hello: 'こんにちは'
  }
}
```

Create `VueI18n` Instance bypassing language code and a text
object.

```
const myLocal= new VueI18n({
  locale: 'en',
  messages: local
});
```

Create new Vue instance and pass i18n object

```
var vueApp = new Vue({
  el: '#app',
  i18n: myLocal
})
```

## Use `vue-i18n` at view, *.Vue file

use as `$t("hello")`

```


    {{ $t("hello") }}



```

That's all for simple way of how to setup
`vue-i18n to handler localization at Vue App.`

## Move to Module

Above code works, but let's move it to a module.

`message.js`, set all message as javascript object.

```
module.exports = {
    en: {
        hello: 'hello'
    },
    ja: {
        hello: 'こんにちは'
    }
}
```

load message.js and setup Vuei18n.

```
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './message'

Vue.use(VueI18n);

export const message = new VueI18n({
  locale: 'en',
  messages: messages
});
```

now, just load the localize module and add to the VUE instance.

```
import {message} from './localize'
var vueApp = new Vue({
  el: '#app',
  i18n: message
})
```

You could also load message.js as JSON file, create another file
`message.json`

```
{
    "en": {
        "hello": "hello"
    },
    "ja": {
        "hello": "こんにちは"
    }
}
```

Also, you could separate original message.json into different language
version.`message_en.json`

```
{
    "en": {
        "hello": "hello"
    }
}
```

`message_ja.json`

```
{
    "ja": {
        "hello": "こんにちは"
    }
}
```

Then, you load the local language based on setting, or you could store this
json to data storage and get from HTTP service.

```
import messages_en from './message_en.json'
import messages_ja from './message_jp.json'
Vue.use(VueI18n);

let msg = {};
if (local === 'en'){
msg  = messages_en;
}
else if (local === 'ja') {
msg  = messages_ja;
}

export const message = new VueI18n({
  locale: 'en',
  messages: msg
});
```

Load message list as JSON file, and there's no change to the main VUE
instance.

```
import messagesJson from './message.json'

Vue.use(VueI18n);

export const message = new VueI18n({
  locale: 'en',
  messages: messagesJson
});
```

## Use vuei18n

```
// access with the message unique name
{{$t("hello")}}

// or access with another constant contains the messaage name
{{$t(constant_hello)}}
```

Use it at Javascript

```
export default {
  name: 'myModuleName',
  data() {
    return {
      test: this.$i18n.t('hello')
    }
  },
```


Vue

Use vue-i18n for Localization at Vue