unplugin-vue-ce
A vue plugin that extends vue's Custom Element capabilities (v-model, child style)
English | 中文
Feature
- 🧩 It is a function extension of vue
- 🌈 Compatible with multiple bundled platforms（vite、webpack）
- ⛰ Support v-model
- ⚡ Support child style
Tips: ⚠ This plugin will inject the implementation code into the vue runtime, which is what I have to tell you.
If you have any problems using it, please submit an issue
Install
npm i unplugin-vue-ce -D
or
yarn add unplugin-vue-ce-D
or
pnpm add unplugin-vue-ce -D
Usage
Tips: You need to enable the customElement option of @vitejs/plugin-vue
Vite
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import { viteVueCE } from 'unplugin-vue-ce'
import vue from '@vitejs/plugin-vue'
import type { PluginOption } from 'vite'
export default defineConfig({
plugins: [
vue(),
viteVueCE() as PluginOption,
],
})
```
Rollup
```ts
// rollup.config.js
import { rollupVueCE } from '@nplugin-vue-ce'
export default {
plugins: [
rollupVueCE(),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-vue-ce').webpackVueCE(),
],
}
```
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-ce').webpackVueCE({}),
],
},
}
```
ESBuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import { esbuildVueCE } from 'unplugin-vue-ce'
build({
plugins: [esbuildVueCE()],
})
```
🎯 Support v-model
view more details @unplugin-vue-ce/v-model
🎃 Support the style of child components
view more details @unplugin-vue-ce/sub-style
🍻 Support using web component as root component
view more details @unplugin-vue-ce/ce-app
🚧 Support switch shadow (TODO)
view more details @unplugin-vue-ce/switch-shadow
Thanks