element-plus/website/docs/jp/i18n.md

150 lines
3.7 KiB
Markdown
Raw Normal View History

# Internationalization
2020-11-04 10:30:14 +08:00
ElementPlus components are using English **by default**, if you wish you use other
languages, you can get you answer by keep reading.
2020-11-04 10:30:14 +08:00
## Global configuration
2020-11-04 10:30:14 +08:00
ElementPlus provides global configurations
2020-11-04 10:30:14 +08:00
```typescript
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {
locale: zhCn,
})
```
2020-11-04 10:30:14 +08:00
## ConfigProvider
ElementPlus also provides a Vue component [ConfigProvider](/#/zh-CN/component/config-provider)
for globally configuring locale and other settings.
2021-07-26 00:40:37 +08:00
```html
<template>
<el-config-provider :locale="locale">
<app />
2021-07-26 00:40:37 +08:00
</el-config-provider>
</template>
<script>
import { defineComponent } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
2021-07-26 00:24:30 +08:00
export default defineComponent({
2021-07-26 00:24:30 +08:00
components: {
ElConfigProvider,
2021-07-26 00:40:37 +08:00
},
setup() {
2021-07-26 00:24:30 +08:00
return {
locale: zhCn,
2021-07-26 00:24:30 +08:00
}
},
})
2021-07-26 00:40:37 +08:00
</script>
2020-11-04 10:30:14 +08:00
```
## CDN Usage
If you are using ElementPlus via CDN, then you need to do this, let's again take
unpkg as an example
```html
<script src="//unpkg.com/element-plus/dist/locale/zh-cn">
<script>
app.use(ElementPlus, {
locale: ElementPlus.lang.zhCn
})
</script>
```
Full documentation refer to: [ConfigProvider](/#/zh-CN/component/config-provider)
2020-11-04 10:30:14 +08:00
[Supported Language List](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
2020-11-04 10:30:14 +08:00
<ul class="language-list">
<li>Simplified Chinese (zh-cn)</li>
2020-11-04 10:30:14 +08:00
<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>
2020-11-04 10:30:14 +08:00
<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>
2020-11-04 10:30:14 +08:00
<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>
2020-11-04 10:30:14 +08:00
<li>Greek (el)</li>
<li>Slovak (sk)</li>
<li>Catalunya (ca)</li>
<li>Czech (cs)</li>
<li>Ukrainian (uk)</li>
2020-11-04 10:30:14 +08:00
<li>Turkmen (tk)</li>
<li>Tamil (ta)</li>
<li>Latvian (lv)</li>
<li>Afrikaans (af)</li>
<li>Estonian (et)</li>
2020-11-04 10:30:14 +08:00
<li>Slovenian (sl)</li>
<li>Arabic (ar)</li>
<li>Hebrew (he)</li>
<li>Lithuanian (lt)</li>
<li>Mongolian (mn)</li>
<li>Kazakh (kk)</li>
2020-11-04 10:30:14 +08:00
<li>Hungarian (hu)</li>
<li>Romanian (ro)</li>
<li>Kurdish (ku)</li>
<li>Uighur (ug-cn)</li>
2020-11-04 10:30:14 +08:00
<li>Khmer (km)</li>
<li>Serbian (sr)</li>
<li>Basque (eu)</li>
<li>Kyrgyz (ky)</li>
<li>Armenian (hy-am)</li>
2020-11-04 10:30:14 +08:00
<li>Croatian (hr)</li>
<li>Esperanto (eo)</li>
</ul>
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).
## 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](https://webpack.js.org/plugins/normal-module-replacement-plugin/#root)
provided by [webpack](https://webpack.js.org) 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
```typescript
{
plugins: [
new webpack.NormalModuleReplacementPlugin(
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
'element-plus/lib/locale/lang/zh-cn',
),
]
}
```