sreenaths 25ee1dee83 [npm] Publish new vue3-webcomponent-wrapper npm version v0.2.0 2 năm trước cách đây
..
.gitignore 70d8aac539 [frontend] Publishing web component wrapper as an NPM package - vue3-webcomponent-wrapper 4 năm trước cách đây
README.md f79575b561 [frontend] Improved vue3-webcomponent-wrapper README 4 năm trước cách đây
package.json 25ee1dee83 [npm] Publish new vue3-webcomponent-wrapper npm version v0.2.0 2 năm trước cách đây

README.md

vue3-webcomponent-wrapper

npm version

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

Before with Vue 2 and @vuejs/vue-web-component-wrapper.

import Vue from 'vue'
import wrapper from '@vue/web-component-wrapper'
import MyComponent from "./components/MyComponent.vue";

const CustomElement = wrapper(Vue, MyComponent)
window.customElements.define('my-component', CustomElement)

Now with Vue 3 and vue3-webcomponent-wrapper.

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

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

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