Use React Components inside Vue.js Solution (this post)
Code: https://github.com/AJIXuMuK/vuejs/tree/master/react-in-vue. In previous posts we discussed practically all the steps and tools that you need to develop SharePoint Framework solution using Vue.js framework. But there is still uncovered question that might impact on developer's decision to use Vue.js in SPFx solution. The question is: Can we and How to use React components inside Vue.js projects? Why should we care about React in Vue? Because Microsoft bets on React and there are a lot of reusable components that simplify SPFx development:
There is Office UI Fabric framework to create Office 365-like UI. And it provides React component to reuse
Good news everyone! We can use React components inside Vue.js! And it's actually pretty easy to do because there is an open-source project Vuera that allows you to integrate Vue.js and React. And let's see how we can use it in SPF solution.
Initial Project Configuration
First, let's create our project. I'll be using VueSPFx Yeoman generator to provision all Vue.js references that we need automatically. And let's use Web Part as a playground as it's much easier to debug and render components in there.
After the project has been created we need to reference React libraries:
I'm using --save-exact to reference exactly the same versions of React libraries that are used by default when provisioning SPFx project using OOTB Yeoman Generator with React Framework Next, let's reference Vuera:
Additionally, let's reference PnP Reusable controls to showcase how to use these components inside Vue.js web part.
Now we have all the configurations in place and let's start development.
Office UI Fabric React Button, WebPartTitle from PnP Reusable Controls and Custom React Component in Vue.js Web Part
In the sample project here I want to show you how to referect Office UI Fabric Button, WebPartTitle component from PnP Reusable controls and custom React component inside a Vue.js web part. The final UI of the web part will be as simple as that:
Let's first create a custom React component to reference it in the Vue.js web part. For that let's add ReactComponent folder as a subfolder of components directory and add ReactComponent.tsx file into it:
The content of the file (and of the component) is pretty simple: let's make it stateless with the only property named text in the props object. And let's just render this property inside a div:
Now let's look at Vuera's documentation to check how to inject React components into Vue.js (Preferred usage): As you can see form the screenshot above, Vuera is set up as a Vue.js plugin, and later you can just reference you React component in Vue.js component components property:
Unfortunately, it doesn't work if you use vue-class-component decorator as it expects components property to be of type:
And React components are neither Component nor AsyncComponent that are both Vue.js custom types. So, we can use another way of injecting React components inro Vue.js that is also mentioned in the documentation (without plugin):
Both options work perfectly. I would prefer the second one as you can use custom elements' names in the template for each component instead of using generic react tag and providing actual component's name as a bind attribute. Let's apply the "HOC API" approach to our project:
Now all the React components can be used in the template (.vue file):
title, displayMode, description are the properties of the Vue.js component and _onTitleUpdate, _onButtonClicked are the methods of the class:
If you look at the code in the provided repo, there is a commented additional option that can be used:
This approach uses custom ReactComponentDecorator that is located in the same repository and allows to mark Vue.js component's class property as "component" and provide its tag and type. Using this custom decorator we can use "recommended" approach from Vuera and no need to use ReactInVue HOC API (Note: it's not necessary to use this decorator, it's just an additional exercise on how to create custom decorators for Vue.js).
The only left part here is to update web part's code to pass all the properties to the Vue.js component while creating it in render method:
As a result of this blog post we've created a Vue.js web part that shows how to use React components inside Vue.js SPFx solutions. It shows how to use all the benefits of Office UI Fabric components, PnP reusable React controls as well as custom developed React components in Vue.js applications. If you're in love with Vue.js but consider to switch to React because it simplifies SPFx development, now you can stick to Vue.js and just reuse React controls in the same manner if you'd be a React developer. And here's a small screen recording of the implemented web part: