Overview
The internationalization (i18n) library for Vue is vue-i18n
and defined in
[metronic]/theme/vue/[demo]/src/common/plugins/vue-i18n.js
.
Vue I18n is internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application. For more detailed documentation, see here
https://kazupon.github.io/vue-i18n/
How to add a new language
Register your new language in the plugin configuration file in
[metronic]/theme/vue/[demo]/src/common/plugins/vue-i18n.js
Create a new language config and the example can be found in this folder
[metronic]/theme/vue/[demo]/src/common/config/i18n/
Import new language config into vue-i18n plugin config file in
[metronic]/theme/vue/[demo]/src/common/plugins/vue-i18n.js
import { locale as myLang } from "@/common/config/i18n/myLang";
//...
messages = { ...messages, en, ch, es, jp, de, fr, myLang };
New language selection can be added in this language selector component
[metronic]/theme/vue/[demo]/src/views/theme/topbar/DropdownLanguage.vue
How to use
Use it anywhere in the HTML template.
{{ $t('message.hello', { msg: 'hello' }) }}
More sample use can be found in https://kazupon.github.io/vue-i18n/started.html