Element UI Pagination in Chinese instead of English

Question

I started using the very nice Element UI components, and when I try to add the pagination component in my project using

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
</el-pagination>

the text appears in chineese like this:

It also happens on their JSFiddle sample, but it's not happening on their website.

Do you know how can I use it in english?

Scarecrow

Answer 1

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en'
import App from './App.vue'

Vue.use(ElementUI, { locale })

new Vue({
  el: '#app',
  render: h => h(App)
})

http://element.eleme.io/#/en-US/component/i18n

Boden

Simple and Straight forward! ✨😁 – Yukoyukon

Answer 2

Just add

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

and

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

The source: https://element.eleme.io/#/en-US/component/i18n#import-via-cdn

It is also recommend that for production, you use a specific version of the unpkg. You can find the latest version by loading the url's (without the leading //) in your browser and then copying the redirected url.

Scarecrow

Answer 3

'Internationalization': https://element.eleme.io/#/en-US/component/i18n

By default the language of Element is Chinese. If you wish to use another language, you'll need to do some i18n configuration.

If you are importing Element entirely: (In your entry file, usually found in src > main.js configure it as shown below)

import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(ElementUI, { locale })

But if you are importing Element on-demand and not in your entire application:

// Here we are importing only the Button and Select component from Element
import Vue from 'vue'
import { Button, Select } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale'

// configure language
locale.use(lang)

// import components
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)

Important: The Chinese language pack is imported by default, even if you're using another language. But with NormalModuleReplacementPlugin provided by webpack you can replace default locale: In your webpack.config.js file

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

Astrograph

Answer 4

In case you’re already setting the locale as suggested, this might also be caused by inconsistent bundling:

1. Your bundler might inline the element-ui/locale import
2. Your bundler might treat the element-ui import as external
3. Therefore, you set the locale on a second copy of the file instead of within element UI itself
4. Element-ui then reads from its own copy and ignores yours

(See https://github.com/3YOURMIND/kotti/pull/264 for a real PR that fixed a bundling issue like this)

Remaremain