Table of Contents

URL: https://www.progressiverobot.com/vuejs-custom-elements/

The Web Components / Custom Elements spec allows you to define your own custom elements in the browser and the logic attached to them. It's been a long time coming, but it's almost here. The advantage of Web Components is that they are interoperable between any framework or library, or even Vanilla JS. Thanks to <^>Vue's<^> small size, with the help of a plugin, you can create native custom elements from Vue components.

Installation

web illustration for: Installation

Vue custom elements require the (appropriately named) <^>vue-custom-element<^> plugin.

Install it via <^>Yarn<^> or <^>NPM<^>.

				
					
# Yarn

$ yarn add vue-custom-element -D



# NPM

$ npm install vue-custom-element --save-dev

Additionally, unless you're only building for Chrome, you'll probably want the document-register-element polyfill.

Creating a Web Component

Write your component as you normally would, single-file components work fine if using a build system.

				
					
[label ExampleComponent.vue]

&lt;template&gt;

  &lt;p&gt;Dynamic prop value: {{myProp}}&lt;/p&gt;

&lt;/template&gt;



&lt;script&gt;

export default {

  props: ['myProp']

}

&lt;/script&gt;

Then, add the <^>vue-custom-element<^> plugin to Vue and register your component.

				
					
[label main.js]

import Vue from 'vue';

import vueCustomElement from 'vue-custom-element';



import ExampleComponent from './ExampleComponent.vue';



// Configure Vue to ignore the element name when defined outside of Vue.

Vue.config.ignoredElements = [

  'example-component'

];



// Enable the plugin

Vue.use(vueCustomElement);



// Register your component

Vue.customElement('example-component', ExampleComponent, {

  // Additional Options: https://github.com/karol-f/vue-custom-element#options

});

Now, after building to a standalone script, you should be able to add that script to any webpage and have it render <^>example-component<^> as expected.

				
					
[label index.html]

&lt;!DOCTYPE html&gt;

&lt;html&gt;

  &lt;head&gt;

    &lt;meta charset="utf-8"&gt;

    &lt;title&gt;My Example Vue Page&lt;/title&gt;

    &lt;script src="dist/build.js" async deferred&gt;&lt;/script&gt;

  &lt;/head&gt;

  &lt;body&gt;

    &lt;example-component myProp="I can pass props!"&gt;&lt;/example-component&gt;

  &lt;/body&gt;

&lt;/html&gt;

Props will still be reactive, though you can't pass values other than strings.

And there you have it! A custom element made with Vue!