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