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

国際化

Element Plusのデフォルト言語は英語です。他の言語を使用したい場合は、i18nの設定を行う必要があります。Element Plusを完全にインポートする場合のエントリーファイル:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'dayjs/locale/ja'
import locale from 'element-plus/lib/locale/lang/ja'

createApp(App).use(ElementPlus, { locale })

または Element Plusをインポートする際は必要に応じて以下の記述します。:

import Vue from 'vue'
import { ElButton, ElSelect } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/ja'
import 'dayjs/locale/ja'
import locale from 'element-plus/lib/locale'

// configure language
locale.use(lang)

// import components
Vue.component(ElButton.name, ElButton)
Vue.component(ElSelect.name, ElSelect)

Set Day.js locale

Element Plus use date time locale (month name, first day of the week ...) from Day.js directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.

import locale from 'element-plus/lib/locale/lang/ja'
import 'dayjs/locale/ja'

// will auto set Day.js locale to 'ja'
app.use(ElementPlus, { locale })

However, you can use another Day.js locale if needed.

import 'dayjs/locale/fr'
dayjs.locale('fr')

たとえ、別の言語を使っていても、英語パックはデフォルトでインポートされます。 しかしながら、webpackで提供されている NormalModuleReplacementPlugin を使えばデフォルトlocaleを差し替えることが出来ます:

webpack.config.js

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

vue-i18n@5.x との互換性

Element vue-i18n@5.x は互換性があり、 多言語切り替えをより簡単に出来ます。

import Vue from 'vue'
import VueI18n 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 app = createApp(App)
app.use(ElementPlus)
Vue.use(VueI18n)

Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)

他のi18nプラグインとの互換性

Elementはvue-i18n以外のi18nプラグインとは互換性がないかもしれませんが、Elementがどのようにi18nを処理するかをカスタマイズすることができます。

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'

Vue.use(ElementPlus, {
  i18n: function (path, options) {
    // ...
  }
})

vue-i18n@6.x との互換性

6.xとの互換性を保つためには、手動で処理する必要があります。

import Vue from 'vue'
import ElementPlus from 'element-plus'
import VueI18n from 'vue-i18n'
import enLocale from 'element-plus/lib/locale/lang/en'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'

Vue.use(VueI18n)

const messages = {
  en: {
    message: 'hello',
    ...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`
  },
  zh: {
    message: '你好',
    ...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

Vue.use(ElementPlus, {
  i18n: (key, value) => i18n.t(key, value)
})

new Vue({ i18n }).$mount('#app')

オンデマンドコンポーネントのカスタムi18n

import Vue from 'vue'
import DatePicker from 'element/lib/date-picker'
import VueI18n from 'vue-i18n'

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'

Vue.use(VueI18n)
Vue.use(DatePicker)

const messages = {
  en: {
    message: 'hello',
    ...enLocale
  },
  zh: {
    message: '你好',
    ...zhLocale
  }
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'en', // set locale
  messages, // set locale messages
})

ElementLocale.i18n((key, value) => i18n.t(key, value))

CDNを経由してインポート

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/element-plus"></script>
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>

<script>
  ELEMENT.locale(ELEMENT.lang.en)
</script>

vue-i18n との互換性

<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="//unpkg.com/element-plus"></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>
  Vue.locale('en', ELEMENT.lang.en)
  Vue.locale('zh-cn', ELEMENT.lang.zhCN)
</script>

現在、Element Plusは以下の言語をフォローしています。:

• 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)

もしあなたのターゲット言語が含まれていない場合、貢献することは大歓迎です: 別の言語の設定を追加して ここで、プルリクエストを作成してください。