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

Internacionalización

El idioma predeterminado de Element Plus es el inglés. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element Plus por completo:

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

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

O si está importando Element Plus a petición:

import Vue from 'vue'
import { ElButton, ElSelect } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/es'
import 'dayjs/locale/es'
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/es'
import 'dayjs/locale/es'

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

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

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

El paquete de idioma inglés se importa por defecto, incluso si se esta usando otro idioma. Pero con NormalModuleReplacementPlugin proporcionado por el webpack puede reemplazar la localización predeterminada:

webpack.config.js

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

Compatible con vue-i18n@5.x

Element Plus es compatible con vue-i18n@5.x, lo que facilita aún más la conmutación multilenguaje.

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)

Compatible con otros plugins i18n

Es posible que Element Plus no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element Plus procesa 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(Element, {
  i18n: function (path, options) {
    // ...
  }
})

Compatible con vue-i18n@6.x

Necesita manejarlo manualmente para ser compatible con 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(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

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

Personalización de i18n en componentes bajo petición

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

Importar via CDN

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

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

Compatible con 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>

Actualmente Element Plus está disponible en los siguientes idiomas:

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

Si su idioma de destino no está incluido, puede contribuir: simplemente añada aqui otra configuración de idioma y cree un pull request.