vue-web-component-wrapper

import { createApp, defineComponent } from 'vue'; import { wrap } from 'vue-web-component-wrapper'; const MyVueComponent = defineComponent({ props: { message: String, count: { type: Number, default: 0 } }, emits: ['increment'], data() { return { internalCount: this.count }; }, methods: { increment() { this.internalCount++; this.$emit('increment', this.internalCount); } }, template: ` <div style="padding: 1rem; border: 1px solid #1a73e8; border-radius: 4px; margin-bottom: 1rem;"> <h3>Hello from Vue Web Component!</h3> <p>Prop Message: <strong>{{ message }}</strong></p> <p>Current Count: <strong>{{ internalCount }}</strong></p> <button @click="increment" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">Increment Count</button> <slot name="footer"></slot> </div> `, }); const app = createApp(MyVueComponent); const WebComponent = wrap(app, MyVueComponent, { props: { message: { type: String, default: 'Default Message' }, count: { type: Number, default: 0 } }, emits: ['increment'], // Example of wrapper options disableShadowDOM: false, // Keep Shadow DOM for encapsulation replaceCssRootToHost: true // Essential for :root styles within Shadow DOM }); // Register the custom element in the browser's CustomElementRegistry customElements.define('my-vue-counter', WebComponent); // Example HTML usage: // <my-vue-counter message="Initial Web Component" count="5"></my-vue-counter> // <my-vue-counter message="Another instance with slot content"> // <p slot="footer" style="color: gray; font-size: 0.9em;">This is content for the footer slot.</p> // </my-vue-counter>