Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/element-plus/unplugin-element-plus

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

element-plus esbuild rollup unplugin vite vue webpack

Last synced: 12 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/element-plus/unplugin-element-plus
Owner: element-plus
License: mit
Created: 2021-09-02T12:17:44.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2024-04-08T09:41:41.000Z (7 months ago)
Last Synced: 2024-04-14T09:04:51.826Z (7 months ago)
Topics: element-plus, esbuild, rollup, unplugin, vite, vue, webpack
Language: TypeScript
Homepage: https://unplugin.element-plus.org
Size: 1.1 MB
Stars: 198
Watchers: 10
Forks: 34
Open Issues: 13
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

awesome-element-plus - unplugin-element-plus - On-demand import style for Element Plus. (Resources / Official Project)
awesome-element-plus - unplugin-element-plus - On-demand import style for Element Plus. (Resources / Official Project)

README

        


  





  

    

  

  

    

  

  




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