github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity
element/examples/docs/en-US/i18n.md

3.6 KiB
Raw Blame History

Internationalization

The default language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element entirely:

import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })

Or if you are importing Element on demand:

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// configure language
locale.use(lang)

// import components
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

The Chinese language pack is imported by default, even if you're using another language. But with NormalModuleReplacementPlugin provided by webpack you can replace default locale:

webpack.config.js

{
  plugins: [
    new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en')
  ]
}

Compatible with vue-i18n

Element is compatible with vue-i18n, which makes multilingual switching even easier.

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)
Vue.use(Element)

Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)

Compatibility with other i18n plugins

Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.

import Vue from 'vue'
import Element from 'element-ui'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(Element, {
  i18n: function (path, options) {
    // ...
  }
})

Import via CDN

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>

<script>
  ELEMENT.locale(ELEMENT.lang.en)
</script>

Compatible with vue-i18n

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="//unpkg.com/element-ui"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>

<script>
  Vue.locale('en', ELEMENT.lang.en)
  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>

Currently Element ships with the following languages:

  • Simplified Chinese (zh-CN)
  • English (en)
  • German (de)
  • Portuguese (pt)
  • Spanish (es)
  • Danish (da)
  • French (fr)
  • Norwegian (nb-NO)
  • Traditional Chinese (zh-TW)
  • Italian (it)
  • Korean (ko)
  • Japanese (ja)
  • Dutch (nl)
  • Vietnamese (vi)
  • Russian (ru-RU)
  • Turkish (tr-TR)
  • Brazilian Portuguese (pt-br)
  • Farsi (fa)
  • Thai (th)
  • Indonesian (id)
  • Bulgarian (bg)
  • Polish (pl)
  • Finnish (fi)
  • Swedish (sv-SE)
  • Greek (el)
  • Slovak (sk)

If your target language is not included, you are more than welcome to contribute: just add another language config here and create a pull request.