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