element-plus-i18n

Element Plus Internationalization

This skill provides comprehensive guidance for configuring internationalization (i18n) in Element Plus applications.

When to Invoke

Invoke this skill when:

• User wants to change the default language
• User needs to configure multiple languages
• User asks about date/time localization
• User wants to add custom translations
• User needs to switch languages dynamically

Default Language

Element Plus components use English by default. To use other languages, you need to configure the locale.

Configuration Methods

1. Global Configuration

Configure the locale when registering Element Plus:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, {
  locale: zhCn,
})

2. ConfigProvider Component

Use el-config-provider for dynamic locale switching:

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script setup>
import { ref } from 'vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

const locale = ref(zhCn)

const switchLanguage = (lang) => {
  locale.value = lang === 'zh' ? zhCn : en
}
</script>

3. CDN Usage

For CDN-based projects:

<script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
<script>
  app.use(ElementPlus, {
    locale: ElementPlusLocaleZhCn,
  })
</script>

Date and Time Localization

Element Plus uses Day.js for date/time management in components like DatePicker. You must import Day.js locale separately:

import 'dayjs/locale/zh-cn'

Complete Example with DatePicker

<template>
  <el-config-provider :locale="locale">
    <el-date-picker
      v-model="date"
      type="date"
      placeholder="Pick a day"
    />
  </el-config-provider>
</template>

<script setup>
import { ref } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'

const locale = ref(zhCn)
const date = ref('')
</script>