
<h1>Use vue-i18n at Vue</h1>
<h2>Install <code>vue-i18n</code></h2>
<p>Install to the different section of the package.json.</p>
<pre class="language-javascript"><code>
// 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
</code></pre>
<h2>Setup&nbsp;<code>vue-i18n</code></h2>
<p>First, use the vue-i18n</p>
<pre class="language-javascript"><code>
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
</code></pre>
<p>setup localized text.</p>
<pre class="language-javascript"><code>
const local= {
  en: {
      hello: 'hello'
  },
  ja: {
      hello: 'こんにちは'
  }
}
</code></pre>
<p>
  Create <code>VueI18n</code> Instance bypassing language code and a text
  object.
</p>
<pre class="language-javascript"><code>
const myLocal= new VueI18n({
  locale: 'en',
  messages: local
});
</code></pre>
<p>Create new Vue instance and pass i18n object</p>
<pre class="language-javascript"><code>
var vueApp = new Vue({
  el: '#app',
  i18n: myLocal 
})
</code></pre>
<h2>Use <code>vue-i18n</code> at view, *.Vue file</h2>
<p>use as <code>$t("hello")</code></p>
<pre class="language-javascript"><code>
&lt;template&gt;
	&lt;div id="app"&gt;
    {{ $t("hello") }}
		&lt;router-view&gt;&lt;/router-view&gt;
	&lt;/div&gt;
&lt;/template&gt;
</code></pre>
<p>
  That's all for simple way of how to setup
  <code>vue-i18n to handler localization at Vue App.</code>
</p>
<h2>Move to Module</h2>
<p>Above code works, but let's move it to a module.</p>
<p><code>message.js</code>, set all message as javascript object.</p>
<pre class="language-javascript"><code>
module.exports = {
    en: {
        hello: 'hello'
    },
    ja: {
        hello: 'こんにちは'
    }
}
</code></pre>
<p>load message.js and setup Vuei18n.</p>
<pre class="language-javascript"><code>
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
});
</code></pre>
<p>now, just load the localize module and add to the VUE instance.</p>
<pre class="language-javascript"><code>
import {message} from './localize'
var vueApp = new Vue({
  el: '#app',
  i18n: message
})
</code></pre>
<p>
  You could also load message.js as JSON&nbsp;file, create another file
  <code>message.json</code>
</p>
<pre class="language-json"><code>
{
    "en": {
        "hello": "hello"
    },
    "ja": {
        "hello": "こんにちは"
    }
}
</code></pre>
<p>
  Also, you could separate original message.json into different language
  version.<code>message_en.json</code>
</p>
<pre class="language-json"><code>
{
    "en": {
        "hello": "hello"
    }
}
</code></pre>
<p><code>message_ja.json</code></p>
<pre class="language-json"><code>
{
    "ja": {
        "hello": "こんにちは"
    }
}
</code></pre>
<p>
  Then, you load the local language based on setting, or you could store this
  json to data storage and get from HTTP service.
</p>
<pre class="language-javascript"><code>
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
});
</code></pre>
<p>
  Load message list as JSON file, and there's no change to the main VUE
  instance.
</p>
<pre class="language-json"><code>
import messagesJson from './message.json'

Vue.use(VueI18n);

export const message = new VueI18n({
  locale: 'en',
  messages: messagesJson
});
</code></pre>
<h2>Use vuei18n</h2>
<pre class="language-javascript"><code>
// access with the message unique name
&lt;span&gt;{{$t("hello")}}&lt;/span&gt;  

// or access with another constant contains the messaage name
&lt;span&gt;{{$t(constant_hello)}}&lt;/span&gt;  
</code></pre>
<p>Use it at Javascript</p>
<pre class="language-javascript"><code>
export default {
  name: 'myModuleName',
  data() {
    return {
      test: this.$i18n.t('hello')
    }
  },
</code></pre>


Category Vue

Use vue-i18n for Localization at Vue