Vue Custom Elements

This project shows how to convert and bundle Vue Components into Web Components using Vue Custom Element

Bundling

Vue Custom Element provides a great way to convert Vue Components into Web Components.
But in order to use them in non-Vue projects, we have to bundle them first.

So the logic here, that we will register all our components, but "without bootstrapping" the Vue application itself. It will bring us a bundle that contains all registered components including Vue library.

To make a bundle we can run the following command:

npm run build

It will create a dist/components.js file which we can then import in any non-Vue project like this:

import './components.js';

// in template
<your-web-component></your-web-component>

Include additional components

In order to include additional components into the bundle, we just need to register them in main.js like:

import VueCustomElement from 'vue-custom-element'

// regiser new component
Vue.customElement('new-component', NewComponent)