Using Vue component as a Web Component in React
Vue CLI allows us to generate any Vue component as a Web Component and that can run with any framework and any browser which supports Web Components.
What this article covers?
- Generation of Web Component from Vue component using Vue CLI 3
- Using Web Component in React (Note: can use the same in other frameworks such as angular)
Generating Web Component from Vue component
Vue CLI 3 came up with multiple build targets — app, library and web component.
- Install Vue CLI and @vue/cli-service-global:
npm install -g @vue/cli @vue/cli-service-global
Installing vue/cli-service-global above package globally allows you to run vue serve
and vue build
directly without any local dependencies.
2. Create a Vue component:
3. Generate the Web Component for the above component.
vue build --target wc --name my-calc my-calc.vue
Note:
- my-calc.vue is the path to the above created Vue Component.
- CLI accepts different targets — app or lib or wc or wc-async. For our case we used wc for Web Component.
The above build will generate the following structure:
Here you look at the demo.html file it includes the Vue library as a dependency to run generated Web Component.
Using generated web component with React
The generated Web Component can be used in React component just like HTML markup just by importing. Note that Vue Library must be part of application index.html for this to work.
See it in action — At the moment the below example is not working in Firefox because Firefox has not yet shipped Custom Elements v1.
Why Vue component to Web Component?
In large enterprise teams can adopt different frameworks for different products. However they need same UI patterns across all the products which requires common UI library which can work with any framework that can be achieved using Vue and Vue CLI😃