Integrating React and Vue Components in One Application

The majority of software developers considers the co-existence of umpteen JavaScript toolings as a downside of the language and its community. Eventually, they get to pick a side on the tooling available for their work and start hating the others.

These are people who think CSS-in-JS is a solution for people who do not understand CSS, people who think NPM is preposterous and only Yarn should be used simply because they never upgraded their NPM versions. And the most common problem is with the client-side frameworks Angular, React, Vue, Ember, etc.

Tools co-exist to challenge and make each other better, and we should use what best fits our architectural implementation. When you understand this, you would know that having a competitive tooling ecosystem is, in fact, a great factor in JavaScript's growth.

Unpopular opinion: I don't want one framework to "win". I'm pretty happy getting to choose based on my needs & them learning from eachother

— Sarah Drasner (@sarah_edo) August 24, 2017

One common pattern I have found is that a developer hates the idea of something and based on that starts ranting, tweeting, and blogging about why they find it terrible. Fine! It is okay to have an opinion, but why not try these technologies first and see if we can understand their purpose? Next time you hear of a new framework remember this:

Never hate on the idea of a technology; hate its usage experience and implementation cost instead

I have used Vue and React and have found them both interesting. I have created interesting components in both, and there are times I may get a project in either, where I think that a component I created for React would be needed here in this Vue project. I could start rewriting it in Vue or simply just plug it in like a lego brick.

This is one of the benefits of separation of concerns and component-based architecture we have been moving towards in our web development. We achieve this with vuera

Even more useful is when you have a component library you use in one of the view libraries that you just want to use in the other.

React in Vue

I built a grid library in React, and I will demonstrate on a Vue application.

Start by installing vuera and my grid library to a Vue application

npm i vuera griz

React and React-DOM will also have to be installed as peer dependencies since my component requires them:

npm i react react-dom

In the main file, you mount the VuePlugin

import Vue from 'vue'
import { VuePlugin } from 'vuera'

Vue.use(VuePlugin)

then from within the component you need you can import the React component

<template>
  <div>
    <griz>
      <griz-col>Column 1</griz-col>
      <griz-col>Column 2</griz-col>
    </griz>
  </div>
</template>

<script> import { Grid, GridCol } from 'griz' export default { name: 'myComponent', components: { Grid, GridCol } } </script>

vue will automatically resolve the camelCased components to lowercase-kebabcase or you could choose to do that explicitly.

Vue in React

You simply need to add vuera as a babel plugin for React

npm i vuera

{
  "presets": ["react"],
  "plugins": ["vuera/babel"]
}

and Vue components can be directly plugged into your React app like so:

import React from 'react'
import MyVueComponent from './MyVueComponent.vue'

const myComponent = () => (
  <div> <h1>My component with a vue component</h1> <div> <MyVueComponent /> </div> </div>
)