Romain Rigaux 03eafbd508 [blog] Use API as tag for Vue3 wrapper post 4 éve
..
.gitignore 70d8aac539 [frontend] Publishing web component wrapper as an NPM package - vue3-webcomponent-wrapper 4 éve
README.md 03eafbd508 [blog] Use API as tag for Vue3 wrapper post 4 éve
package.json 70d8aac539 [frontend] Publishing web component wrapper as an NPM package - vue3-webcomponent-wrapper 4 éve

README.md

vue3-webcomponent-wrapper

Vue 3 wrapper to convert a Vue component into Web Component. It supports reactive attributes, events & slots.

This is a port of @vuejs/vue-web-component-wrapper (Official Vue 2 web component wrapper package) to work with Vue 3. And could be deprecated once the official wrapper package starts supporting Vue 3. Progress of Vue3 support is tracked in this issue.

One main blocker preventing the official wrapper from upgrading was the lack of shadow-root CSS injection in Vue 3 build tooling. As we could live without a shadow dom in Hue this was not an issue and this port was created.

Usage

import { createApp, h } from "vue";
import wrapper from "vue3-webcomponent-wrapper";
import MyComponent from "./components/MyComponent.vue";

const webComponent = wrapper(MyComponent, createApp, h);
window.customElements.define("my-component", webComponent);

Please find more information in this demo app.

Build & Publish

vue3-webcomponent-wrapper is build as part of gethue npm build. Following are the steps to be followed under hue root to build and publish this package.

npm run webpack-npm
cd tools/vue3-webcomponent-wrapper
npm publish