GitHub - element-plus/unplugin-element-plus: 🔌 Import Element Plus on demand. Support Vite, Webpack, Vue CLI, Rollup and esbuild.

This repo is for element-plus related unplugin. Thanks @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

npm i unplugin-element-plus -D

Vite

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

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

Rollup

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

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

Rolldown

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

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

esbuild

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

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

Webpack

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

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

Rspack

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

Usage

It will automatically transform:

import { ElButton } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

Options

`useSource`

default: false

// 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 for more information.

default: 'element-plus'

// lib: 'other-lib'
import { ElButton } from 'other-lib'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { ElButton } from 'other-lib'
import 'other-lib/es/components/button/style/css'

`format`

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

// format: 'cjs'
import { ElButton } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { ElButton } from 'element-plus'
import 'element-plus/lib/components/button/style/css'

`prefix`

// prefix = Al
import { AlButton } from 'xx-lib'

`ignoreComponents`

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.

// format: 'cjs'
import { ElAutoResizer } from 'element-plus'

//    ↓ ↓ ↓ ↓ ↓ ↓

import { ElAutoResizer } from 'element-plus'

`defaultLocale`

Replace default locale, you can find locale list here.

Alternate

unplugin-vue-components