2021-09-17 00:18:50 +08:00
---
title: Internationalization
2021-10-22 19:32:39 +08:00
lang: en-US
2021-09-17 00:18:50 +08:00
---
2021-08-24 13:36:48 +08:00
# Internationalization
2020-08-13 15:18:26 +08:00
2021-09-17 09:18:40 +08:00
Element Plus components are using English **by default** , if you wish you use other
2021-08-24 13:36:48 +08:00
languages, you can get you answer by keep reading.
2020-08-13 15:18:26 +08:00
2021-08-24 13:36:48 +08:00
## Global configuration
2020-08-13 15:18:26 +08:00
2021-09-17 09:18:40 +08:00
Element Plus provides global configurations
2021-07-26 00:24:30 +08:00
2024-07-19 09:34:36 +08:00
```ts
2021-08-24 13:36:48 +08:00
import ElementPlus from 'element-plus'
2024-04-05 17:59:24 +08:00
import zhCn from 'element-plus/es/locale/lang/zh-cn'
2021-07-26 00:24:30 +08:00
2021-08-24 13:36:48 +08:00
app.use(ElementPlus, {
locale: zhCn,
})
```
2021-07-26 00:24:30 +08:00
2021-08-24 13:36:48 +08:00
## ConfigProvider
2021-07-26 00:24:30 +08:00
2021-09-17 09:18:40 +08:00
Element Plus also provides a Vue component [ConfigProvider ](/en-US/component/config-provider )
2021-08-24 13:36:48 +08:00
for globally configuring locale and other settings.
2020-08-13 15:18:26 +08:00
2024-07-19 09:34:36 +08:00
```vue
2021-07-26 00:40:37 +08:00
< template >
2024-07-19 09:34:36 +08:00
< el-config-provider :locale = "zhCn" >
2021-08-24 13:36:48 +08:00
< app / >
2021-07-26 00:40:37 +08:00
< / el-config-provider >
< / template >
2024-07-19 09:34:36 +08:00
< script setup lang = "ts" >
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
2021-07-26 00:40:37 +08:00
< / script >
2021-01-25 16:23:15 +08:00
```
2022-11-15 01:07:07 +08:00
## Date and time localization
We use [Day.js ](https://day.js.org/docs/en/i18n/i18n ) library to manage date and time in components like `DatePicker` . It is important to set a proper locale in Day.js to make the internationalization fully works. You have to import Day.js's locale config separately.
2023-02-02 20:26:00 +08:00
2024-07-19 09:34:36 +08:00
```ts
2022-11-15 01:07:07 +08:00
import 'dayjs/locale/zh-cn'
```
2021-08-25 16:52:23 +08:00
## CDN Usage
2021-09-17 09:18:40 +08:00
If you are using Element Plus via CDN, then you need to do this, let's again take
2021-08-25 16:52:23 +08:00
unpkg as an example
```html
2022-01-24 23:37:19 +08:00
< script src = "//unpkg.com/element-plus/dist/locale/zh-cn" > < / script >
< script >
2021-09-04 19:29:28 +08:00
app.use(ElementPlus, {
2022-01-24 23:37:19 +08:00
locale: ElementPlusLocaleZhCn,
2021-09-04 19:29:28 +08:00
})
2021-08-25 16:52:23 +08:00
< / script >
```
2021-09-17 00:18:50 +08:00
Full documentation refer to: [ConfigProvider ](/en-US/component/config-provider )
2020-08-13 15:18:26 +08:00
2021-08-24 13:36:48 +08:00
[Supported Language List ](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang )
2021-01-19 23:49:07 +08:00
2020-08-13 15:18:26 +08:00
< ul class = "language-list" >
2020-11-09 14:53:43 +08:00
< li > Simplified Chinese (zh-cn)< / li >
2021-09-17 00:18:50 +08:00
< li > American English (en)< / li >
2022-03-30 09:26:30 +08:00
< li > Azerbaijani (az)< / li >
2020-08-13 15:18:26 +08:00
< li > German (de)< / li >
< li > Portuguese (pt)< / li >
< li > Spanish (es)< / li >
< li > Danish (da)< / li >
< li > French (fr)< / li >
2020-11-19 15:58:25 +08:00
< li > Norwegian (nb-NO)< / li >
2020-11-09 14:53:43 +08:00
< li > Traditional Chinese (zh-tw)< / li >
2020-08-13 15:18:26 +08:00
< li > Italian (it)< / li >
< li > Korean (ko)< / li >
< li > Japanese (ja)< / li >
< li > Dutch (nl)< / li >
< li > Vietnamese (vi)< / li >
2020-11-19 15:58:25 +08:00
< li > Russian (ru)< / li >
< li > Turkish (tr)< / li >
2020-08-13 15:18:26 +08:00
< li > Brazilian Portuguese (pt-br)< / li >
< li > Farsi (fa)< / li >
< li > Thai (th)< / li >
< li > Indonesian (id)< / li >
< li > Bulgarian (bg)< / li >
2021-11-19 12:48:14 +08:00
< li > Pashto (pa)< / li >
2020-08-13 15:18:26 +08:00
< li > Polish (pl)< / li >
< li > Finnish (fi)< / li >
2020-11-19 15:58:25 +08:00
< li > Swedish (sv)< / li >
2020-08-13 15:18:26 +08:00
< li > Greek (el)< / li >
< li > Slovak (sk)< / li >
< li > Catalunya (ca)< / li >
2020-11-19 15:58:25 +08:00
< li > Czech (cs)< / li >
< li > Ukrainian (uk)< / li >
2020-08-13 15:18:26 +08:00
< li > Turkmen (tk)< / li >
< li > Tamil (ta)< / li >
< li > Latvian (lv)< / li >
2020-11-19 15:58:25 +08:00
< li > Afrikaans (af)< / li >
< li > Estonian (et)< / li >
2020-08-13 15:18:26 +08:00
< li > Slovenian (sl)< / li >
< li > Arabic (ar)< / li >
< li > Hebrew (he)< / li >
< li > Lithuanian (lt)< / li >
< li > Mongolian (mn)< / li >
2020-11-19 15:58:25 +08:00
< li > Kazakh (kk)< / li >
2020-08-13 15:18:26 +08:00
< li > Hungarian (hu)< / li >
< li > Romanian (ro)< / li >
< li > Kurdish (ku)< / li >
2022-12-12 20:37:19 +08:00
< li > Kurdish (ckb)< / li >
2020-11-09 14:53:43 +08:00
< li > Uighur (ug-cn)< / li >
2020-08-13 15:18:26 +08:00
< li > Khmer (km)< / li >
< li > Serbian (sr)< / li >
2020-11-19 15:58:25 +08:00
< li > Basque (eu)< / li >
< li > Kyrgyz (ky)< / li >
< li > Armenian (hy-am)< / li >
2020-08-13 15:18:26 +08:00
< li > Croatian (hr)< / li >
< li > Esperanto (eo)< / li >
2021-10-22 12:09:00 +08:00
< li > Bengali (bn)< / li >
2020-08-13 15:18:26 +08:00
< / ul >
2021-08-24 13:36:48 +08:00
If you need any other languages, [PR ](https://github.com/element-plus/element-plus/pulls )
is always welcomed, you only need to add a language file at
[here ](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang ).
2022-01-24 23:37:19 +08:00
< style >
.language-list {
list-style: disc
}
< / style >