Using Web Components in Vue.js 2.5

It is straightforward to use standard Web Components within Vue. The bindings and events still work as expected.

This simple web component project illustrates the use of a web components with properties and events within a Vue application.

All major browsers are supported, IE 11 included.

Getting Started

The source code is hosted at GitHub.

The following Git command wil clone the project and download the sources to the local machine.

$ git clone https://github.com/kozmoz/webcomponent-vue.git 

Prerequisites

The only requirement is npm.

Installing

To get the required dependencies, issue the following npm command:

$ npm install

Now start serving the app and open the following URL in the browser: http://localhost:8080/

$ npm run serve

Resources

Blogs

I used these blog posts as primary source for my code.

• BLOG: Web Components - Attributes and Properties in Custom Elements
• BLOG: Integrate Web Components with Your Vue.js App

Built With

The Vue.js libraries.

• Vue.js 2.5 - The Progressive JavaScript Framework
• Vue CLI 3 - Standard Tooling for Vue.js Development

---

This README.md is based on a template from: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2