Although you may have the capabilities to create some web components with Vue.js, what happens if you would like to integrate web components instead of building them? In this article we are going to take a quick look at how you would be able to integrate web components with your Vue.js project.
We assume that you already have or are working on a Vue.js project with vue-cli and the webpack-simple template.
To start, you will need a web component that is already built. For this, you can reference the following simple web component posted on Codepen.io
If you want to use this web component in your Vue.js project, you can whitelist it in the Vue.config.ignoredElements. This indicates to Vue that you are using something that is outside of its framework. When it’s being ignored, you can use it in your project. Edit the src/main.js file to add the following:
Vue.config.ignoredElements=['vanilla-webcomponent-template']
You can now use and reference this component within your Vue.js project.