1.0.5 • Published 6 years ago
tb-vue-i18n v1.0.5
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.)