Vuact
Vuact is a React runtime compatibility layer for Vue 3. It enables seamless usage of the React component ecosystem inside Vue 3 projects, with two-way interoperability between Vue and React for components, events, reactivity, Context, Ref, and more.
Key value:
- - Seamlessly use React components in Vue apps
- Support bidirectional migration: Vue ↔ React
- Use Vue and React in the same application
- Build cross-stack component libraries in a React-like way
Quick Start
For the full configuration and initialization flow, see setup-config.md.
Core Capabilities
1. Component Conversion
Vuact provides two core functions to convert components between Vue and React:
- - r2v (react-to-vue): Convert a React component into a Vue component
- v2r (vue-to-react): Convert a Vue component into a React component
Examples:
2. Slots and Render Props
Vuact provides a flexible slots and render-props transformation mechanism:
- - On the Vue side, you can pass children, element props, or render props to React components via slots
- On the React side, you can pass slots to Vue components via props prefixed with INLINECODE0
3. Events and Props Interop
Vuact automatically transforms props and events between Vue and React:
- - Vue
class → React INLINECODE2 - Vue
style (string or object) → React style (object) - React
className → Vue INLINECODE6 - React
style (object; auto-add px for unitless values) → Vue INLINECODE9 - Vue
v-model update events → React INLINECODE11
Examples:
4. Context Interop
Vuact supports two-way Context passing between Vue and React:
- - On the Vue side, you can provide React Context to React components via INLINECODE12
- On the React side, you can provide Vue Context to Vue components via INLINECODE13
- Context can pass through both frameworks
Examples:
5. Ref Interop
Vuact supports passing refs between Vue and React components:
- - On the Vue side, use
ref to get a React component instance - On the React side, use
ref to get a Vue component instance - For function components, expose methods via INLINECODE16
Examples:
6. Use Vue Hooks in React Components
Vuact lets you use Vue reactivity directly inside React components:
- - Create a Vue reactive scope via INLINECODE17
- Use Vue hooks like
ref, watch, computed, etc. within that scope - Combine the reactivity systems from both frameworks
Examples:
Compatibility and Limitations
Version Compatibility
- - React: mainly compatible with React 16–18; React 19 support is in progress
- Vue: requires Vue >= 3.5
- Build tools: ESM-only; requires a modern bundler
Known Limitations
Because Vuact is essentially based on Vue, some behaviors cannot fully match React:
- 1. Concurrent rendering: Vue renders recursively, so React concurrent rendering cannot be replicated
- Commit phase: Vue mutates the DOM during recursive rendering; there is no explicit commit phase like React
-
useInsertionEffect timing differs from React
-
getSnapshotBeforeUpdate timing differs from React
- 3. Event system:
@vue/runtime-dom cannot fully match INLINECODE24
-
react-dom's
SyntheticEvent differs from standard web events
-
react-dom applies special handling for some native DOM elements (e.g.
input,
form, etc.)
Full Examples
Load the relevant reference docs to get complete example code and detailed explanations.
Vue → React (r2v)
React → Vue (v2r)
Configuration and Initialization
- - setup-config.md - Full configuration and initialization guide (more complete than the README)
Vuact
Vuact 是 Vue 3 的 React 运行时兼容层。它能够在 Vue 3 项目中无缝使用 React 组件生态系统，并在 Vue 和 React 之间实现组件、事件、响应性、Context、Ref 等的双向互操作。
核心价值：
- - 在 Vue 应用中无缝使用 React 组件
- 支持双向迁移：Vue ↔ React
- 在同一应用中使用 Vue 和 React
- 以类似 React 的方式构建跨栈组件库
快速开始
完整的配置和初始化流程，请参见 setup-config.md。
核心能力
1. 组件转换
Vuact 提供两个核心函数，用于在 Vue 和 React 之间转换组件：
- - r2v (react-to-vue)：将 React 组件转换为 Vue 组件
- v2r (vue-to-react)：将 Vue 组件转换为 React 组件
示例：
2. 插槽与渲染属性
Vuact 提供灵活的插槽和渲染属性转换机制：
- - 在 Vue 端，您可以通过插槽向 React 组件传递子元素、元素属性或渲染属性
- 在 React 端，您可以通过以 slot: 为前缀的属性向 Vue 组件传递插槽
3. 事件与属性互操作
Vuact 自动在 Vue 和 React 之间转换属性和事件：
- - Vue class → React className
- Vue style（字符串或对象）→ React style（对象）
- React className → Vue class
- React style（对象；为无单位值自动添加 px）→ Vue style
- Vue v-model 更新事件 → React onUpdate:xxx
示例：
4. Context 互操作
Vuact 支持 Vue 和 React 之间的双向 Context 传递：
- - 在 Vue 端，您可以通过 provideContext 向 React 组件提供 React Context
- 在 React 端，您可以通过 VueContextProvider 向 Vue 组件提供 Vue Context
- Context 可以跨两个框架传递
示例：
5. Ref 互操作
Vuact 支持在 Vue 和 React 组件之间传递 ref：
- - 在 Vue 端，使用 ref 获取 React 组件实例
- 在 React 端，使用 ref 获取 Vue 组件实例
- 对于函数组件，通过 useImperativeHandle 暴露方法
示例：
6. 在 React 组件中使用 Vue Hooks
Vuact 让您直接在 React 组件中使用 Vue 响应性：
- - 通过 useVueEffectScope 创建 Vue 响应作用域
- 在该作用域内使用 Vue hooks，如 ref、watch、computed 等
- 结合两个框架的响应系统
示例：
兼容性与限制
版本兼容性
- - React：主要兼容 React 16–18；React 19 支持正在开发中
- Vue：需要 Vue >= 3.5
- 构建工具：仅支持 ESM；需要现代打包工具
已知限制
由于 Vuact 本质上基于 Vue，某些行为无法完全匹配 React：
- 1. 并发渲染：Vue 递归渲染，因此无法复制 React 的并发渲染
- 提交阶段：Vue 在递归渲染期间修改 DOM；没有像 React 那样的显式提交阶段
- useInsertionEffect 的时机与 React 不同
- getSnapshotBeforeUpdate 的时机与 React 不同
- 3. 事件系统：@vue/runtime-dom 无法完全匹配 react-dom
- react-dom 的 SyntheticEvent 与标准 Web 事件不同
- react-dom 对某些原生 DOM 元素（如 input、form 等）应用了特殊处理
完整示例
加载相关参考文档以获取完整的示例代码和详细说明。
Vue → React (r2v)
React → Vue (v2r)
配置与初始化
