A straightforward implemention for multi-language for local Vue app (e.g. electron). You can change language dynamically.
The recommended way to install and maintain vue-dynamic-locale in your project is through the Node.js Pacakge Manager (NPM), simply type the npm command in your project folder:
npm install vue-dynamic-locale --save
To use vue-dynamic-locale, you must install it as a Vue plugin with store included in options:
import VueDynamicLocale from 'vue-dynamic-locale'
// path is the directory of locale json files.
const path = 'static/locale'
// default locale for the application
const defaultLocale = 'en'
// Vuex store must be included in options.
Vue.install(VueDynamicLocale, { store, path, defaultLocale })
Then, you can use $t object in your Vue components to access current language for specific key. For example, the language json file may like this:
{
"Hellow": {
"World": "Dynamic"
},
"Locale": "Vue",
"Array": ["Value1", "Value2", "Value3"],
"Root": {
".": "Root", // "." is a special key represents it's root
"Child": "Child"
}
}
Then you can use it like this in Vue template:
$t['Hellow.World'] // === 'Dynamic'
$t['Locale'] // === 'Vue'
$t['Array.0'] // === 'Value1'
$t['Array.2'] // === 'Value3'
$t['Root'] // === 'Root'
$t['Root.Child'] // === 'Child'
You can change locale by $setLocale(), and $getLocales() to list all avaiable locales in your locale directory.
Distributed under the MIT license. See LICENSE for detail.