vue-react
vue-react is a plugin for Vue.js that allows you to use React components just like if they were Vue components.View Demo
Installation
npm
npm install vue-react --save
yarn
yarn add vue-react
If you dont have already, install react and react-dom packages. Install the babel plugin also.
npm install react react-dom babel-plugin-transform-react-jsx --save
Add the plugin in your
.babelrc
file:{
"plugins": ["transform-react-jsx"]
}
Usage
First of all, import and install the plugin:import VueReact from 'vue-react';
Vue.use(VueReact);
After that, import and register your React components using the new
react
method:import ResizableReact from 'react-resizable-box';
Vue.react('Resizable', ResizableReact);
Use your registered component inside your App as usual Vue component.
<Resizable className="resizable-item" :width="width" :height="height" @onResizeStop="onStop"></Resizable>
How it works ?
Thereact
method creates a new Vue component that maps props and events to the React component. Once mounted, the vue component creates and renders the React component.This way the registered component works exactly as a Vue component.
Further improvements
- Support for slots.