gloriasoft/veaury

Use React in Vue3 and Vue3 in React, And as perfect as possible!

Summary

Veaury is a JavaScript library that lets you render Vue 3 components inside React applications and React components inside Vue 3 applications through a small set of higher-order components. It is published on npm as veaury under the MIT license and includes support for shared context, cross-framework hooks, SSR setups like Next.js and Nuxt, and a "pure mode" that avoids adding wrapper elements.

What it is useful for

• Mixing Vue 3 and React in one app, which helps when a codebase already contains components from both ecosystems
• Incremental migration between the two frameworks without rewriting every screen at once
• Embedding third-party UI libraries on the other side, such as a React antd component inside a Vue project, or a Vue element-ui or vuetify component inside a React project

How engineers can use it

1. Install with the commands documented in the README: yarn add veaury or npm i veaury -S.
2. Wrap the component to be embedded. In a React file: import { applyPureReactInVue } from 'veaury' and register applyPureReactInVue(MyReactComponent) as a Vue component. The reverse is applyVueInReact or applyPureVueInReact to wrap a .vue SFC and drop it into JSX. The README recommends applyPureReactInVue and applyPureVueInReact for their pure-mode behavior.
3. Configure the build pipeline. Vite users must install @vitejs/plugin-react, @vitejs/plugin-vue, and @vitejs/plugin-vue-jsx, then replace the default plugins with veauryVitePlugins imported from veaury/vite/index.js, passing type: 'vue' or type: 'react'. For Webpack, @vue/cli, and create-react-app, the README links to separate dev-project-vue3 and dev-project-react repos for the full configurations; the exact Webpack files are not in the main README.
4. For react-dom 19 and above, the README requires veaury@^2.6.0 plus a one-time global call to setVeauryOptions({ react: { createRoot } }), or rendering will fail.
5. Cross-framework state uses React's Provider / useContext and Vue's provide / inject, and the useInjectPropsFromWrapper option exposes React hooks inside Vue and Vue setup hooks inside React. Events, slots, scoped slots, and v-model are mapped with documented conventions, including v-slots={...} for named slots, a node: slot prefix for React nodes, and v-model={[value, setter]} for two-way binding.
6. Documented limitation: with applyPureReactInVue or applyReactInVue, rapidly changing values can lag during two-way binding; the README provides injectSyncUpdateForPureReactInVue to patch the affected component, and the TOC also flags a TypeScript JSX type conflict that arises when Vue and React are used in the same project.