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 :-)

• #howto_style
• #tutorial
• #javascript
• #vue
• #web_components
• #shadow_dom
• #properties
• #custom_elements
• #vue_cli
• #vue_cli
• #vue_target_wc
• #component
• #custom_element