elmassimo/vue-custom-element-example

An example on how to define custom elements using Vue 3

defineCustomElement(DarkModeSwitch)

This repo is an example on how to use the defineCustomElement API in Vue 3.

It contains examples on how to export Vue components as custom elements, and how to use them in any app.

Read the blog post for a step by step discussion.

Demo 🚀

Visit the live demo to see the custom element in action.

Play 🎸

npm run dev: build the library and start the playground

vue-custom-element-example's Issues

Can we publish on NPM and using in React/Next ?

Wanna ask, can we publish on NPM and using in React/Next ? thankyou

Including vue-router and pinia

Hey @ElMassimo, thanks for this invaluable repo, I was able to build and ship a complex Web Component with Chart.JS and Tailwind, pretty cool and I enjoyed a lot, your repo was very helpful.

I want to go step ahead with this approach and I wanna know if you have thought about how to include vue-router and pinia libraries, so we might using them without any issue. I'm trying implement this approach but I have been finding some caveats. I will be thankfully if you help me putting this in the right direction with this.

Regards!

How can workaround vuetify options in vue custom elements?

Thanks for your article about custom elements, I would like to know how can include vuetify options inside of vue custom element?
How can workaround?

Unclear on using in an external site

Hey @ElMassimo,

Can I use your dark mode switch on my site? How would I do that? I tried this:

<script type="module" src="https://raw.githubusercontent.com/ElMassimo/vue-custom-element-example/main/package/src/index.ts"></script>

But it did not work.

Basically, I'm trying to build a "widget" that someone can embed on their site (like your dark mode switch), but am unclear how you would embed a Vue custom element on an external site. So, how would I embed your dark mode switch on my site? Is that possible?