Michael Thiessen

Vue to Web Component in 3 Easy Steps

Invalid Date

Here's how you can create web components in Vue.

First, create the custom element from a Vue component using defineCustomElement:

import { defineCustomElement } from 'vue';

import MyVueComponent from './MyVueComponent.vue';



const customElement = defineCustomElement(MyVueComponent);

Second, register the custom element with the DOM:

customElements.define('my-vue-component', customElement);

Third, use the custom element in your HTML:

<html>

  <head></head>

  <body>

    <my-vue-component></my-vue-component>

  </body>

</html>

Now you've got a custom web component that doesn't need a framework and can run natively in the browser!

Check out the docs for more details on how this works.

Related Articles