tb-vue-i18n

Vue i18n plugin

Usage

Install in your VueJS project:

npm i -s tb-vue-i18n

Import in main.js:

import LanguagePlugin from 'tb-vue-i18n'

Create a language file in json format (e.g. dictionary.json):

{
  "eng": {
    "navbar.title": "Title in english",
    "login.button": "Login in english"
  },

  "ger": {
    "navbar.title": "Something german",
    "login.button": "Some other german thing"
  }
}

And after importing the dictionary, install the plugin with it:

import languageConfig from '../static/dictionary.json'

Vue.use(LanguagePlugin, languageConfig)

---

And you are good to go!
In your templates...

<div class="my-navbar">{{ $i('navbar.title') }}</div>

...or in your code

methods: {
  alertSomething: function() {
    alert(this.$i('navbar.title'))
  }
}

---

Change language in any component:
From the template...

<button @click="$setLang('eng')">
  <img src="static/eng.jpg">
</button>

...or in your code

methods: {
  changeLanguage: function(language) {
    this.$setLang(language))
  }
}

(Notice the string 'eng' - $setLang should be called with the key of the language in the json file.)