|
@@ -1,4 +1,5 @@
|
|
|
# vue3-webcomponent-wrapper
|
|
# vue3-webcomponent-wrapper
|
|
|
|
|
+[](https://www.npmjs.com/package/vue3-webcomponent-wrapper)
|
|
|
|
|
|
|
|
Vue 3 wrapper to convert a Vue component into Web Component. It supports reactive attributes, events & slots.
|
|
Vue 3 wrapper to convert a Vue component into Web Component. It supports reactive attributes, events & slots.
|
|
|
|
|
|
|
@@ -8,12 +9,23 @@ One main blocker preventing the official wrapper from upgrading was the lack of
|
|
|
|
|
|
|
|
## Usage
|
|
## Usage
|
|
|
|
|
|
|
|
|
|
+Before with Vue 2 and [@vuejs/vue-web-component-wrapper](https://github.com/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 { createApp, h } from "vue";
|
|
|
import wrapper from "vue3-webcomponent-wrapper";
|
|
import wrapper from "vue3-webcomponent-wrapper";
|
|
|
import MyComponent from "./components/MyComponent.vue";
|
|
import MyComponent from "./components/MyComponent.vue";
|
|
|
|
|
|
|
|
- const webComponent = wrapper(MyComponent, createApp, h);
|
|
|
|
|
- window.customElements.define("my-component", webComponent);
|
|
|
|
|
|
|
+ const CustomElement = wrapper(MyComponent, createApp, h);
|
|
|
|
|
+ window.customElements.define("my-component", CustomElement);
|
|
|
|
|
|
|
|
|
|
|
|
|
Please find more information in this [demo app](https://github.com/sreenaths/vue3-webcomponent-wrapper-demo).
|
|
Please find more information in this [demo app](https://github.com/sreenaths/vue3-webcomponent-wrapper-demo).
|