A library for bridging React components to Vue

revue

A library for bridging React components to Vue.

This library is currently a PoC, only for demostrating the possibility of using React components in Vue.

Features

  • Updates of React components are fully driven by reactivity.
  • Single React root per Vue app, providing more friendly devtools experience.
  • The context of a React component are synchronized within the Vue component tree.

Getting Started

First, define the bridge component (e.g. in button.ts):

import { h } from 'vue';
import { Button } from '@nextui-org/react';
import { defineReactComponent } from 'revue';

export default defineReactComponent(Button, {
    onClick: Function,
}, {
    containerRender() {
        return h('div', {
            style: { display: 'inline-block' }
        });
    },
});

Since every React component must be mounted on a DOM element, you can customize the host element by specifying containerRender.

Then you can use your favorite React component in any Vue component:

<template>
  <div>
    <Button :onClick="sayHello">Say Hello</Button>
  </div>
</template>

<script lang="ts" setup>
import Button from './button';  // Import the bridged component.

function sayHello() {
    console.log('Hello, world!');
}
</script>

Example

Clone the repository, and run the following command to serve the example locally:

npm install
npm run dev

License

MIT

GitHub

View Github