Internationalization

Element UI X provides a fully compatible internationalization solution with Element UI, supporting [email protected], [email protected]+ and other i18n plugins.

Supported Languages

• Simplified Chinese (zh-CN)
• Traditional Chinese (zh-TW)
• English (en)
• Japanese (ja-JP)
• Korean (ko-KR)
• French (fr-FR)
• German (de-DE)
• Spanish (es-ES)
• Russian (ru-RU)
• Portuguese (pt-BR)
• Italian (it-IT)
• Arabic (ar-SA)
• French (fr-FR)
• German (de-DE)
• Spanish (es-ES)
• Russian (ru-RU)
• Portuguese (pt-BR)
• Italian (it-IT)
• Arabic (ar-SA)
• Traditional Chinese (zh-TW)

Usage

1. Full Import + Default Language Setting

import Vue from 'vue';
import ElementUIX from 'vue-element-ui-x';
import enLang from 'vue-element-ui-x/lib/locale/lang/en';

Vue.use(ElementUIX, { locale: enLang });

// Other language examples
import jaLang from 'vue-element-ui-x/lib/locale/lang/ja';
import frLang from 'vue-element-ui-x/lib/locale/lang/fr';
import deLang from 'vue-element-ui-x/lib/locale/lang/de';

// Vue.use(ElementUIX, { locale: jaLang }); // Japanese
// Vue.use(ElementUIX, { locale: frLang }); // French
// Vue.use(ElementUIX, { locale: deLang }); // German

2. On-demand Import + Manual Language Setting

import Vue from 'vue';
import { ElXThinking, ElXSender, locale } from 'vue-element-ui-x';
import enLang from 'vue-element-ui-x/lib/locale/lang/en';

// Set language
locale.use(enLang);

// Register components
Vue.component(ElXThinking.name, ElXThinking);
Vue.component(ElXSender.name, ElXSender);

3. Compatible with [email protected]

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import ElementUIX, { locale } from 'vue-element-ui-x';

Vue.use(VueI18n);
Vue.use(ElementUIX);

// Configure [email protected]
Vue.config.lang = 'en';
Vue.locale('en', {
  // Your application translations
  message: 'Hello',
  // Element UI X translations
  ...locale.lang.en,
});
Vue.locale('zh-cn', {
  // Your application translations
  message: '你好',
  // Element UI X translations
  ...locale.lang['zh-CN'],
});

4. Compatible with [email protected]+

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import ElementUIX, { locale } from 'vue-element-ui-x';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en',
  messages: {
    en: {
      message: 'Hello',
      ...locale.lang.en,
    },
    'zh-CN': {
      message: '你好',
      ...locale.lang['zh-CN'],
    },
  },
});

// Configure Element UI X to use vue-i18n
locale.i18n((key, value) => i18n.t(key, value));

Vue.use(ElementUIX);

new Vue({
  i18n,
  // ...
}).$mount('#app');

5. Compatible with Other i18n Plugins

import Vue from 'vue';
import ElementUIX, { locale } from 'vue-element-ui-x';
import myI18n from 'my-i18n-plugin';

// Configure custom translation function
locale.i18n((key, value) => {
  // Your custom translation logic
  return myI18n.translate(key, value);
});

Vue.use(ElementUIX);