Using Vue.js to create custom web components
Vue.js + Web Components
This post was originaly created & hosted on Vuetips and submitted to vuejsfeed.com.
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 caniuse.com.
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
WebComponents.org : Custom Elements catalog and resources
Demythstifying Web Components by Daniel Buchner
Learn about web-components & custom elements here.
