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
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
```typescript
|
|
|
|
import ElementPlus from 'element-plus'
|
|
|
|
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
|
|
|
|
2021-07-26 00:40:37 +08:00
|
|
|
```html
|
|
|
|
<template>
|
|
|
|
<el-config-provider :locale="locale">
|
2021-08-24 13:36:48 +08:00
|
|
|
<app />
|
2021-07-26 00:40:37 +08:00
|
|
|
</el-config-provider>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2021-09-04 19:29:28 +08:00
|
|
|
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,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
})
|
2021-07-26 00:40:37 +08:00
|
|
|
</script>
|
2021-01-25 16:23:15 +08:00
|
|
|
```
|
|
|
|
|
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>
|
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>
|
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>
|