How to create a Web Component in Vue

In this video we go through the steps to create a Web Component using the Vue framework and test that it works just as any manually created one would. Using the Vue CLI we build a standard Single File Component with the --target of WC which wraps our component so as to expose the Web Component standards and create a Shadow DOM for us.

The reason for trying this was to see just how easy, or hard! it is to create a Web Component using Vue. *Spolier* alert it is unbelievably easy to do so in Vue :-)

[SallanMasih]

Nice tutorial, can we use vue-router in web component ?

[juliopeguero]

This is a very good tutorial, straight to the point, and very clear. Thank you!

[kimboender]

Nice little tutorial for creating Web Components in Vue. Totally clear!

[amirhoseinarmantaheri]

i have a small question:
if i wanna use my web component which is created by vue 3 in a third party website (website may uses any version of vue or not at all)
and the question:
is it possible to face vue version conflict between my web component vue version and the third party website vue version ?

[rcpfuchs]

Sehr gutes Tutorial. Hat mir gefallen, weil es auch einfach auf anhieb funktioniert hat. Danke Sehr! Grüße aus Deutschland.

[FidelGuajardo]

Nice and easy way to create Vue components!. Thanks!

[luisgabriel]

amazing!! thanks a lot, i have a question: is it possible to join the cdn vue file with the component js file that one you only need 1 file for distribution purposes?

[diegopallares]

How do you import any web component in a vue project?

[ShadowInfest]

Thanks a lot for this really great and simple tutorial. Helped a lot :)

[heruhailiuhuang]

how can we use web componet in vue project?

[LumbreraEnMiCamino]

how can i do the same with vue create project?

[Jay-slzw]

Question what if i have multiple vue component and make it as 1 web component? for example i have button and text input and make this as 1 web component is this possible?