# unplugin-element-plus

> Import Element Plus on demand. Support Vite, Webpack, Vue CLI, Rollup and esbuild.

Latest version **0.11.2** (published 2025-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install unplugin-element-plus
pnpm add unplugin-element-plus
yarn add unplugin-element-plus
bun add unplugin-element-plus
```

## Health

**Score 70/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.11.2 |
| Published | 2025-12-15 |
| First published | 2021-09-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.19.0 |
| Dependencies | 5 |
| Unpacked size | 24.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 252 |
| Maintainers | jeremywuuuuu |
| Keywords | element-plus, unplugin, vite, webpack, rollup, esbuild, plugin |

## Links

- npm: https://www.npmjs.com/package/unplugin-element-plus
- Repository: https://github.com/element-plus/unplugin-element-plus
- Homepage: https://github.com/element-plus/unplugin-element-plus/tree/main/#readme
- Issues: https://github.com/element-plus/unplugin-element-plus/issues
- npm.io page: https://npm.io/package/unplugin-element-plus

## Dependencies (5)

- [unplugin](https://npm.io/package/unplugin.md) ^2.3.11
- [@nuxt/kit](https://npm.io/package/@nuxt/kit.md) ^4.2.2
- [es-module-lexer](https://npm.io/package/es-module-lexer.md) ^2.0.0
- [rolldown-string](https://npm.io/package/rolldown-string.md) ^0.2.1
- [escape-string-regexp](https://npm.io/package/escape-string-regexp.md) ^5.0.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.11.2 (latest) — 2025-12-15
- 0.11.1 — 2025-11-07
- 0.11.0 — 2025-11-04
- 0.10.0 — 2025-04-24
- 0.9.1 — 2025-02-07
- 0.9.0 — 2024-12-29
- 0.8.0 — 2023-08-02
- 0.7.2 — 2023-07-06
- 0.7.1 — 2023-04-11
- 0.7.0 — 2023-02-17
- 0.6.0 — 2023-02-01
- 0.5.0 — 2023-02-01
- 0.4.1 — 2022-07-01
- 0.4.0 — 2022-04-13
- 0.3.4 — 2022-04-02
- … 10 more at https://npm.io/package/unplugin-element-plus/versions

## README

<p align="center">
  <img width="300px" src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png">
</p>

<p align="center">
  <a href="https://www.npmjs.org/package/unplugin-element-plus">
    <img src="https://img.shields.io/npm/v/unplugin-element-plus.svg">
  </a>
  <a href="https://npmcharts.com/compare/unplugin-element-plus?minimal=true">
    <img src="http://img.shields.io/npm/dm/unplugin-element-plus.svg">
  </a>
  <br>
</p>

# unplugin-element-plus

[![Unit Test](https://github.com/element-plus/unplugin-element-plus/actions/workflows/unit-test.yml/badge.svg)](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 <a href="https://github.com/unjs/unplugin">unplugin</a>.

## Installation

```bash
npm i unplugin-element-plus -D
```

<details>
<summary>Vite</summary><br>

```ts
// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'

export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}
```

<br></details>

<details>
<summary>Rollup</summary><br>

```ts
// rollup.config.js
import ElementPlus from 'unplugin-element-plus/rollup'

export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}
```

<br></details>

<details>
<summary>Rolldown</summary><br>

```ts
// rolldown.config.js
import ElementPlus from 'unplugin-element-plus/rolldown'

export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}
```

<br></details>

<details>
<summary>esbuild</summary><br>

```ts
// esbuild.config.js
import { build } from 'esbuild'
import ElementPlus from 'unplugin-element-plus/esbuild'

build({
  plugins: [
    ElementPlus({
      // options
    }),
  ],
})
```

<br></details>

<details>
<summary>Webpack</summary><br>

```ts
// webpack.config.js
import ElementPlus from 'unplugin-element-plus/webpack'

export default {
  /* ... */
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}
```

<br></details>

<details>
<summary>Rspack</summary><br>

```ts
// rspack.config.js
import ElementPlus from 'unplugin-element-plus/rspack'
export default {
  /* ... */
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}
```

<br></details>

## 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)

---
_Source: https://npm.io/package/unplugin-element-plus · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._