With the release of Vue 3.5, Vue has more support for custom elements. This repository should have completed its mission (a transitional solution before Vue supports more features for custom elements), so this repository should not support 3.5. I recommend you upgrade to Vue 3.5.x to meet your needs for custom elements.

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.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.config.js
import { rollupVueCE } from '@nplugin-vue-ce'
export default {
  plugins: [
    rollupVueCE(),
  ],
}

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

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

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

Thanks

• vue-web-component-wrapper