Using Vue.js to create custom web components

Vue.js + Web Components

This post was originaly created & hosted on Vuetips and submitted to

Learn how to turn your Vue.js components into universal web components. Web Components let you define new HTML tags, referred to as custom elements. Do it via the HTML way with vue-custom-element, which is a library written by @karol-f that allows you to use a Vue.js component as a custom element.

  • script dependencies have to be included in the final HTML file
  • the component behavior is readable directly from the source code

The above can be good or bad things, depending on your use case.

This implementation requires Vue.js core files and the vue-custom-element library to be included in your page.

Bundling Vue.js components in a single .js file.

Web components are similar to Vue.js components. They have a lifecycle, properties, and can be nested. They have a different API that is less powerful but standard. Here you find a problem, web components are not fully supported by browsers yet. See browser support for Web Components on are-we-componentized-yet or

But, with a bit of JS magic you can turn your Vue.js component into web components, enabling you to use it in any web application, even using React, Angular or your favorite framework.

Also you can learn a bit about Web Components API. This is not essential to use Vue.js components as web components but it is often good to know how things work to write better code.

Web Components include the following W3C specs :

  • Custom Element
  • HTML Template
  • HTML Import

Links that may help you get a better understanding:

Vue Custom Element : transform Vue.js components into custom elements

Vue Custom Element Bundler : bundle Vue.js components in a single .js file : Custom Elements catalog and resources

Demythstifying Web Components by Daniel Buchner

Learn about web-components & custom elements here.