vue-react is a plugin for Vue.js that allows you to use React components just like if they were Vue components.

Demo (soon)

npm install vue-react --save

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"]
}

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>

The react 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.

• Support for slots.