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.

1. 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:

my-calc Web Component

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😃