fi3ework/unplugin-vue-ce

🍒 A vue plugin that extends vue's Custom Element capabilities

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

// 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

// rollup.config.js
import { rollupVueCE } from '@nplugin-vue-ce'
export default {
  plugins: [
    rollupVueCE(),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-vue-ce').webpackVueCE(),
  ],
}

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-vue-ce').webpackVueCE({}),
    ],
  },
}

ESBuild

// 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

• vue-web-component-wrapper