Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

## Internationalization (i18n)

### Overview

The internationalization (i18n) library for Vue is `vue-i18n` and defined in `[metronic]/theme/vue/[demo]/src/core/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/core/plugins/vue-i18n.js`

Create a new language config and the example can be found in this folder `[metronic]/theme/vue/[demo]/src/core/config/i18n/`

Import new language config into vue-i18n plugin config file in `[metronic]/theme/vue/[demo]/src/core/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/view/layout/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