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.
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
The only requirement is npm.
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
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
The Vue.js libraries.
- Vue CLI 3 - Standard Tooling for Vue.js Development
This README.md is based on a template from: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2