# unplugin-element-plus
[](https://github.com/element-plus/unplugin-element-plus/actions/workflows/unit-test.yml)
[English](README.md) | [δΈζ](README.zh-CN.md)
This repo is for element-plus related [unplugin](https://github.com/unjs/unplugin). Thanks [@antfu](https://github.com/antfu).
###### Features
- π On-demand import style for Element Plus.
- π Replace default locale.
- β‘οΈ Supports Vite, Webpack, Vue CLI, Rollup, esbuild and more, powered by unplugin.
## Installation
```bash
npm i unplugin-element-plus -D
```
Vite
```ts
// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
export default {
plugins: [
ElementPlus({
// options
}),
],
}
```
Rollup
```ts
// rollup.config.js
import ElementPlus from 'unplugin-element-plus/rollup'
export default {
plugins: [
ElementPlus({
// options
}),
],
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [
require('unplugin-element-plus/esbuild')({
// options
}),
],
})
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-element-plus/webpack')({
// options
}),
],
}
```
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-element-plus/webpack')({
// options
}),
],
},
}
```
## Usage
It will automatically transform:
```javascript
import { ElButton } from 'element-plus'
// β β β β β β
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'
```
## Options
### `useSource`
```ts
type UseSource = boolean
```
default: `false`
```javascript
// useSource: false
import { ElButton } from 'element-plus'
// β β β β β β
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'
// useSource: true
import { ElButton } from 'element-plus'
// β β β β β β
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/index'
```
### `lib`
Normally you wouldn't use this option but as a general option we exposed it anyway.
When using this your bundle structure should be the same as ElementPlus.
See [unpkg.com](https://unpkg.com/element-plus) for more information.
```ts
type Lib = string
```
default: 'element-plus'
```javascript
// lib: 'other-lib'
import { ElButton } from 'other-lib'
// β β β β β β
import { ElButton } from 'other-lib'
import 'other-lib/es/components/button/style/css'
```
### `format`
```ts
type Format = 'esm' | 'cjs'
```
default: 'esm'
`esm` for `element-plus/es/components/*`
`cjs` for `element-plus/lib/components/*`
- `/es` for ES Module
- `/lib` for CommonJS
This option is for which format to use
```javascript
// format: 'cjs'
import { ElButton } from 'element-plus'
// β β β β β β
import { ElButton } from 'element-plus'
import 'element-plus/lib/components/button/style/css'
```
### `prefix`
```ts
type Prefix = string
```
```javascript
// prefix = Al
import { AlButton } from 'xx-lib'
```
### `ignoreComponents`
```ts
type IgnoreComponents = string[]
```
Skip style imports for a list of components. Useful for Element Plus components which do not have a style file.
At the time of writing, this is only the `AutoResizer` component.
```javascript
// format: 'cjs'
import { ElAutoResizer } from 'element-plus'
// β β β β β β
import { ElAutoResizer } from 'element-plus'
```
### `defaultLocale`
Replace default locale, you can find locale list [here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang).
## Alternate
- [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)