Internationalization

ElementPlus components are using English by default, if you wish you use other languages, you can get you answer by keep reading.

Global configuration

ElementPlus provides global configurations

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

ConfigProvider

ElementPlus also provides a Vue component ConfigProvider for globally configuring locale and other settings.

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      locale: zhCn,
    }
  },
})
</script>

CDN Usage

If you are using ElementPlus via CDN, then you need to do this, let's again take unpkg as an example

<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
<script>
app.use(ElementPlus, {
  locale: ElementPlus.lang.zhCn
})
</script>

Full documentation refer to: ConfigProvider

Supported Language List

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)
Turkish (tr)
Brazilian Portuguese (pt-br)
Farsi (fa)
Thai (th)
Indonesian (id)
Bulgarian (bg)
Polish (pl)
Finnish (fi)
Swedish (sv)
Greek (el)
Slovak (sk)
Catalunya (ca)
Czech (cs)
Ukrainian (uk)
Turkmen (tk)
Tamil (ta)
Latvian (lv)
Afrikaans (af)
Estonian (et)
Slovenian (sl)
Arabic (ar)
Hebrew (he)
Lithuanian (lt)
Mongolian (mn)
Kazakh (kk)
Hungarian (hu)
Romanian (ro)
Kurdish (ku)
Uighur (ug-cn)
Khmer (km)
Serbian (sr)
Basque (eu)
Kyrgyz (ky)
Armenian (hy-am)
Croatian (hr)
Esperanto (eo)

If you need any other languages, PR is always welcomed, you only need to add a language file at here.

FAQs

If I want to replace the default language pack to reduce the size, how do I do?

When the default language of your app is not English, you will be going to need to import another language file, which will increase the bundle size since you have both English and Your desired language bundled, you can use the plugin NormalModuleReplacementPlugin provided by webpack to replace the default language file, so that you will only get 1 language file bundled. Add the code below into your webpack.config.js to get it work.

webpack.config.js

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

3.7 KiB Raw Blame History