/vue-react-bridge

Demo for mouting React component in Vue without iframe isolation.

Primary LanguageTypeScript

vue-react-bridge

Just you can use Vue components in React components.

<script setup>
import { SomeReactComponent as SomeReactComponentReact } from './components/SomeReactComponent'
import { reactInVue } from 'vue-react-bridge'

const SomeReactComponent = reactInVue(SomeReactComponentReact)
</script>

<template>
  <SomeReactComponentReact :prop="value" />
</template>

Installation

npm install vue-react-bridge
yarn add vue-react-bridge
pnpm install vue-react-bridge
bun add vue-react-bridge

Launch demo app

pnpm i
pnpm run dev

Architecture

  • Manager -> Renderer
    • Creates vnode.
  • Locator
    • Takes a component and props.
    • Creates mount target.
    • Registers to the manager.