Getting Started with Web Components

Integrating Web Components in Vue

Vue is another one of those libraries that is growing incredibly fast, so I thought it would be a good thing if we saw how a web component can be included in a Vue component.

Let's say we have a <main-body> Vue component that looks something like this:

Vue.component('main-body', {  props: ['src', 'alt'],  template: `    <p>This is the main body</p>    `,})

As you can see, it does nothing other than show text, just like the main body component in Angular and React. Let's say we want to include the <header-image> web component to this <main-body> component. This would make the <main-body> component look something like this:

import HeaderImage from '../web-components/header-image/header-image.js';Vue.component('main-body', ...