## Internationalisation La langue par défaut d'Element Plus est le Anglais. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée: The default locale of Element Plus is English. If you want to use another language, you'll need to do some i18n configuration. In your entry file: :::warning We have made breaking changes after **1.0.2-beta.59(included)**, please keep reading for more information,this documentation **does not apply to version before 1.0.2-beta.58(included)** ::: ### 1.0.2-beta.59(included): After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n functionalities can be applied seamlessly for both full bundle & on demand usage. #### 1. Via ConfigProvider If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code. ```html ``` #### Useful links: - [Supported languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) - [ConfigProvider Documentation](#/fr/component/config-provider) #### 2. Via Composable hook Using this way is basically implementing a [ConfigProvider](https://element-plus.org/#/en-US/component/config-provider) on your own to inject configurations. ```ts import { useLocale, useLocaleProps } from 'element-plus' // Locale Wrapper entry const Provider = defineComponent({ props: { // If you want language switching feature, you need to add these props // into your Provider ...useLocaleProps, }, setup() { // No parameters needed, but the props above is required // ` { locale?: Language, i18n?: (...args: any[]) => string }` useLocale() } }) createApp( { // ... template: ` ` } ) ``` ### Set Day.js locale Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded. ```typescript import locale from 'element-plus/lib/locale/lang/fr' import 'dayjs/locale/fr' // will auto set Day.js locale to 'fr' app.use(ElementPlus, { locale }) ``` However, you can use another Day.js locale if needed. ```typescript import 'dayjs/locale/es' dayjs.locale('es') ``` La pack de la langue Anglais est importé par défaut, même si vous configurez une autre langue. En utilisant le `NormalModuleReplacementPlugin` fournit par webpack vous pouvez remplacer la locale par défaut: webpack.config.js ```typescript { plugins: [ new webpack.NormalModuleReplacementPlugin( /element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, 'element-plus/lib/locale/lang/fr', ), ] } ``` ### Compatible avec `vue-i18n@9.x` Element Plus est compatible avec [vue-i18n@9.x](https://vue-i18n-next.intlify.dev/guide/#html), ce qui rend le changement de langue encore plus simple. ```typescript 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 avec d'autres plugins i18n Element Plus n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n. :::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. ::: ```typescript 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. }) ``` ### i18n personnalisée dans les composants à la demande Need translation If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html) ```typescript 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) ``` ### Import via un CDN ```html ``` Compatible avec `vue-i18n` ```html ``` Actuellement, Element Plus supporte les langues suivantes: Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration [ici](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) et créez une pull request.