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 via es modules:

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

locale(lang)
createApp(App).component(ElButton.name, ElButton)

O si está importando Element Plus a petición via babel-plugin-component:

import { createApp } 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
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 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@9.x

Need translation

If you need to check out VueI18n documentation, please click this link to check it out.

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

Need translation

:::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. :::

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

Personalización de i18n en componentes bajo petición

Need translation

If you need to know how to lazy loading translation strings, please check this outLazy loading

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)

Importar via CDN

<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/es.js"></script>
<script src="//unpkg.com/dayjs/locale/es.js"></script>

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

Compatible con vue-i18n

<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>
  // Need translation
  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>

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.