mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
b1db142ad5
* fix: fix i18n bundle error * chore: update * chore: update
314 lines
9.1 KiB
Markdown
314 lines
9.1 KiB
Markdown
## Internationalization
|
||
|
||
The default locale of Element Plus is English. If you want to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element Plus entirely:
|
||
|
||
```typescript
|
||
import { createApp } from 'vue'
|
||
import ElementPlus from 'element-plus'
|
||
import locale from 'element-plus/lib/locale/lang/zh-cn'
|
||
import 'dayjs/locale/zh-cn'
|
||
|
||
createApp(App).use(ElementPlus, { locale })
|
||
```
|
||
if you are importing Element Plus on demand via **es modules**:
|
||
|
||
```typescript
|
||
import { createApp } from 'vue'
|
||
import { ElButton, locale } from 'element-plus'
|
||
import lang from 'element-plus/lib/locale/lang/zh-cn'
|
||
import 'dayjs/locale/zh-cn'
|
||
|
||
locale(lang)
|
||
createApp(App).component(ElButton.name, ElButton)
|
||
```
|
||
|
||
Or if you are importing Element Plus on demand via [babel-plugin-component](#/en-US/component/quickstart#on-demand):
|
||
|
||
```typescript
|
||
import { createApp } from 'vue'
|
||
import { ElButton, ElSelect } from 'element-plus'
|
||
import lang from 'element-plus/lib/locale/lang/zh-cn'
|
||
import 'dayjs/locale/zh-cn'
|
||
import locale from 'element-plus/lib/locale'
|
||
|
||
// configure language
|
||
locale.use(lang)
|
||
|
||
// import components
|
||
createApp(App).component(ElButton.name, ElButton)
|
||
createApp(App).component(ElSelect.name, ElSelect)
|
||
```
|
||
|
||
### Set Day.js locale
|
||
|
||
Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.
|
||
|
||
```typescript
|
||
import locale from 'element-plus/lib/locale/lang/zh-cn'
|
||
import 'dayjs/locale/zh-cn'
|
||
|
||
// will auto set Day.js locale to 'zh-cn'
|
||
app.use(ElementPlus, { locale })
|
||
```
|
||
|
||
However, you can use another Day.js locale if needed.
|
||
|
||
```typescript
|
||
import 'dayjs/locale/fr'
|
||
dayjs.locale('fr')
|
||
```
|
||
|
||
The English locale is imported by default, even if you're using another locale. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale:
|
||
|
||
webpack.config.js
|
||
|
||
```typescript
|
||
{
|
||
plugins: [
|
||
new webpack.NormalModuleReplacementPlugin(
|
||
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
|
||
'element-plus/lib/locale/lang/zh-cn',
|
||
),
|
||
]
|
||
}
|
||
```
|
||
|
||
### Compatible `vue-i18n@9.x`
|
||
|
||
If you need to check out [VueI18n documentation](https://vue-i18n-next.intlify.dev/guide/#html), please click this link to check it out.
|
||
|
||
```typescript
|
||
import { createApp } from 'vue'
|
||
import { createI18n } from 'vue-i18n'
|
||
import ElementPlus from 'element-plus'
|
||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||
import App from './App.vue'
|
||
|
||
const messages = {
|
||
[enLocale.name]: {
|
||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||
el: enLocale.el,
|
||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||
// Because that makes the ElementPlus internal translation invalid.
|
||
message: {
|
||
hello: 'hello world',
|
||
},
|
||
},
|
||
[zhLocale.name]: {
|
||
el: zhLocale.el,
|
||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||
// Because that makes the ElementPlus internal translation invalid.
|
||
message: {
|
||
hello: '你好,世界',
|
||
},
|
||
},
|
||
testLocale: {
|
||
el: {},
|
||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||
},
|
||
}
|
||
|
||
const i18n = createI18n({
|
||
locale: zhLocale.name,
|
||
fallbackLocale: enLocale.name,
|
||
messages,
|
||
})
|
||
|
||
const app = createApp(App)
|
||
|
||
app.use(ElementPlus, {
|
||
i18n: i18n.global.t,
|
||
})
|
||
|
||
// Remember to use this plugin.
|
||
app.use(i18n)
|
||
```
|
||
|
||
### Compatible with other i18n plugins
|
||
|
||
Element Plus may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element Plus processes i18n.
|
||
|
||
:::tip
|
||
Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like `el.scope.subName`, other wise the internal translation string will be raw string.
|
||
:::
|
||
|
||
```typescript
|
||
import Vue from 'vue'
|
||
import ElementPlus from 'element-plus'
|
||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||
|
||
// The is the signature of i18n method.
|
||
type i18n = (...args: any[]) => string
|
||
Vue.use(Element, {
|
||
i18n: function(path, options) {
|
||
// ...
|
||
},
|
||
// others.
|
||
})
|
||
```
|
||
|
||
### Custom i18n in on-demand components
|
||
|
||
If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html)
|
||
|
||
```typescript
|
||
import { createApp } from 'vue'
|
||
import { createI18n } from 'vue-i18n'
|
||
import ElementPlus from 'element-plus'
|
||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||
import ElementLocale from 'element-plus/lib/locale'
|
||
import App from './App.vue'
|
||
|
||
const messages = {
|
||
[enLocale.name]: {
|
||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||
el: enLocale.el,
|
||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||
// Because that makes the ElementPlus internal translation invalid.
|
||
message: {
|
||
hello: 'hello world',
|
||
},
|
||
},
|
||
[zhLocale.name]: {
|
||
el: zhLocale.el,
|
||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||
// Because that makes the ElementPlus internal translation invalid.
|
||
message: {
|
||
hello: '你好,世界',
|
||
},
|
||
},
|
||
testLocale: {
|
||
el: {},
|
||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||
},
|
||
}
|
||
|
||
const i18n = createI18n({
|
||
locale: zhLocale.name,
|
||
fallbackLocale: enLocale.name,
|
||
messages,
|
||
})
|
||
|
||
ElementLocale.i18n(i18n.global.t)
|
||
|
||
const app = createApp(App)
|
||
app.use(i18n)
|
||
```
|
||
|
||
### Import via CDN
|
||
|
||
```html
|
||
<script src="//unpkg.com/vue@next"></script>
|
||
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
|
||
<script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
|
||
<script src="//unpkg.com/dayjs/locale/zh-cn.js"></script>
|
||
|
||
<script>
|
||
ElementPlus.locale(ElementPlus.lang.zhCn)
|
||
</script>
|
||
```
|
||
|
||
Compatible with `vue-i18n`
|
||
|
||
```html
|
||
<script src="//unpkg.com/vue@next"></script>
|
||
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
|
||
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
|
||
<script src="//unpkg.com/element-plus/lib/umd/locale/zh-cn.js"></script>
|
||
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
|
||
|
||
<script>
|
||
const i18n = Vue18n.createI18n({
|
||
locale: ElementPlus.lang.zhCN.name,
|
||
fallbackLocale: ElementPlus.lang.en.name,
|
||
messages: {
|
||
[ElementPlus.lang.en.name]: {
|
||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||
el: ElementPlus.lang.en.el,
|
||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||
// Because that makes the ElementPlus internal translation invalid.
|
||
message: {
|
||
hello: 'hello world',
|
||
},
|
||
},
|
||
[ElementPlus.lang.zhCN.name]: {
|
||
el: ElementPlus.lang.zhCN.el,
|
||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||
// Because that makes the ElementPlus internal translation invalid.
|
||
message: {
|
||
hello: '你好,世界',
|
||
},
|
||
},
|
||
testLocale: {
|
||
el: {},
|
||
// No message translations, it will fallback to en lang.
|
||
},
|
||
},
|
||
})
|
||
|
||
const app = Vue.createApp()
|
||
app.use(i18n)
|
||
</script>
|
||
```
|
||
|
||
Currently Element Plus ships with the following languages:
|
||
|
||
<ul class="language-list">
|
||
<li>Simplified Chinese (zh-cn)</li>
|
||
<li>English (en)</li>
|
||
<li>German (de)</li>
|
||
<li>Portuguese (pt)</li>
|
||
<li>Spanish (es)</li>
|
||
<li>Danish (da)</li>
|
||
<li>French (fr)</li>
|
||
<li>Norwegian (nb-NO)</li>
|
||
<li>Traditional Chinese (zh-tw)</li>
|
||
<li>Italian (it)</li>
|
||
<li>Korean (ko)</li>
|
||
<li>Japanese (ja)</li>
|
||
<li>Dutch (nl)</li>
|
||
<li>Vietnamese (vi)</li>
|
||
<li>Russian (ru)</li>
|
||
<li>Turkish (tr)</li>
|
||
<li>Brazilian Portuguese (pt-br)</li>
|
||
<li>Farsi (fa)</li>
|
||
<li>Thai (th)</li>
|
||
<li>Indonesian (id)</li>
|
||
<li>Bulgarian (bg)</li>
|
||
<li>Polish (pl)</li>
|
||
<li>Finnish (fi)</li>
|
||
<li>Swedish (sv)</li>
|
||
<li>Greek (el)</li>
|
||
<li>Slovak (sk)</li>
|
||
<li>Catalunya (ca)</li>
|
||
<li>Czech (cs)</li>
|
||
<li>Ukrainian (uk)</li>
|
||
<li>Turkmen (tk)</li>
|
||
<li>Tamil (ta)</li>
|
||
<li>Latvian (lv)</li>
|
||
<li>Afrikaans (af)</li>
|
||
<li>Estonian (et)</li>
|
||
<li>Slovenian (sl)</li>
|
||
<li>Arabic (ar)</li>
|
||
<li>Hebrew (he)</li>
|
||
<li>Lithuanian (lt)</li>
|
||
<li>Mongolian (mn)</li>
|
||
<li>Kazakh (kk)</li>
|
||
<li>Hungarian (hu)</li>
|
||
<li>Romanian (ro)</li>
|
||
<li>Kurdish (ku)</li>
|
||
<li>Uighur (ug-cn)</li>
|
||
<li>Khmer (km)</li>
|
||
<li>Serbian (sr)</li>
|
||
<li>Basque (eu)</li>
|
||
<li>Kyrgyz (ky)</li>
|
||
<li>Armenian (hy-am)</li>
|
||
<li>Croatian (hr)</li>
|
||
<li>Esperanto (eo)</li>
|
||
</ul>
|
||
|
||
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) and create a pull request.
|