Use Vue.js to create custom web components – Vue.js Tips

  • See browser support for Web Components on are-we-componentized-yet or caniuse.com

    But, with a bit of JS magic you can now turn your Vue.js component into web components, enabling you to use it in any web application, even using React, Angular or is a library written by @karol-f that allows you to use a Vue.js component as a custom element.

  • Once you register the custom element, you can insert its tag into standard HTML, SPA’s, React, Angular or Vue.js projects.
  • js file embedding Vue itself, the lib and your Vue.js components, registered to be used as custom elements.
  • Registering a custom element is done by using

    Note that is called when the element is inserted

    Also, the component’s tag has to meet a few requirements :

    More details in the W3C specs

    The custom element’s markup can be embedded in a tag inside the DOM.

  • I thought it would confuse developers that focus on porting their Vue.js components to custom elements.

Include Vue.js components in any HTML/JS application

@VueJsNews: Use #Vuejs web components in any #JavaScript app or framework – #reactjs #angularjs…

Web Components let you define new HTML tags, referred to as custom elements. These tags can then be used in your app’s HTML code directly, like this :

will be interpreted by the browser and “replaced” by the HTML markup you have defined. This will result in :

events and share the current page when a link is clicked.

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, defined by W3C specs.

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 now turn your Vue.js component into web components, enabling you to use it in any web application, even using React, Angular or .

How to turn your Vue.js component into universal web components

vue-custom-element is a library written by @karol-f that allows you to use a Vue.js component as a custom element.

Once you register the custom element, you can insert its tag into standard HTML, SPA’s, React, Angular or Vue.js projects.

library to be included in your page.

property of your component.

Pros and cons

This implies two things :

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

A common use case I can imagine is distributing a Vue.js component in form of a widget across multiple websites. So let’s bundle all this code in a single file.

Check the vue-customelement-bundler repository that contains :

lib and your Vue.js components, registered to be used as custom elements. You can then use your components in any HTML/JS app, like this :

Note : The output file weights 266kB. This is too much. I have tried to minify it but my Webpack skills don’t go this far. UglifyJsPlugin threw me an error I couldn’t solve. So if you can, please let me know how to optimize my setup, I am sure it could get much better.

Edit 5/4 : Thanks to @anthonygore and UglifyJS, the output file weights 113kB.

Edit 6/4 : @anthonygore on fire, gets another 22kB off the bundle. The output file now weight 91kB ! @chimon2000 is bundling using Rollup instead of Webpack, providing a minified file of 74kB..!

This section 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 is the main API that allows developers to define a new HTML tag that can be interpreted by the browser.

It features lifecycle callbacks (aka reactions) :

Sounds familiar ? Yes, this does look like the Vue.js components lifecycle !

statements.

is called when the element is inserted

Also, the component’s tag has to meet a few requirements :

More details in the W3C specs

tag inside the DOM.

tag.

Sounds more and more familiar, doesn’t it ?

method of HTML elements.

Host can communicate with the component in two ways :

of you want to trigger logic when an attribute’s value is changed.

The second method works in Vue.js, although it is not recommended.

Current support for these can be followed on caniuse.com or are-we-componentized-yet.

Polyfill libraries allow you to use these APIs in browsers that don’t support them yet. Here are some links :

Note : I haven’t mentioned Shadow DOM in this post. I thought it would confuse developers that focus on porting their Vue.js components to custom elements. Check out the links at the end of the post for more resources.

Use Vue.js to create custom web components – Vue.js Tips