{"id":13491829,"url":"https://github.com/gloriasoft/veaury","last_synced_at":"2025-05-14T15:07:09.281Z","repository":{"id":37718108,"uuid":"455923939","full_name":"gloriasoft/veaury","owner":"gloriasoft","description":"Use React in Vue3 and Vue3 in React, And as perfect as possible!","archived":false,"fork":false,"pushed_at":"2025-01-30T10:45:23.000Z","size":2352,"stargazers_count":1473,"open_issues_count":24,"forks_count":89,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-04-05T18:51:36.664Z","etag":null,"topics":["react","veaury","vue","vue3","vuereact-combined"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gloriasoft.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["devilwjp"]}},"created_at":"2022-02-05T16:33:48.000Z","updated_at":"2025-04-03T07:57:01.000Z","dependencies_parsed_at":"2024-01-06T03:40:29.637Z","dependency_job_id":"38a0d20a-ce18-4f51-bdf1-9d04bec79834","html_url":"https://github.com/gloriasoft/veaury","commit_stats":{"total_commits":445,"total_committers":4,"mean_commits":111.25,"dds":0.008988764044943864,"last_synced_commit":"60e3631802f12c3dd7262d9e95dd91fa0070bf01"},"previous_names":["devilwjp/combined","gloriasoft/veaury"],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gloriasoft%2Fveaury","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gloriasoft%2Fveaury/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gloriasoft%2Fveaury/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gloriasoft%2Fveaury/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gloriasoft","download_url":"https://codeload.github.com/gloriasoft/veaury/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631469,"owners_count":21136552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","veaury","vue","vue3","vuereact-combined"],"created_at":"2024-07-31T19:01:00.590Z","updated_at":"2025-04-12T20:37:17.164Z","avatar_url":"https://github.com/gloriasoft.png","language":"JavaScript","funding_links":["https://github.com/sponsors/devilwjp"],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=center\u003e\r\n  \u003cimg src=\"https://github.com/devilwjp/VueReact/assets/38802722/dd7ccd14-4e02-4f4c-bf59-bc0f95088d82\"/\u003e\r\n\u003c/div\u003e  \r\n\u003ch1 align=center\u003eVeaury\u003c/h1\u003e\r\n\u003ch2 align=center\u003eUse React in Vue3 and Vue3 in React, And as perfect as possible!\u003c/h2\u003e\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"https://coveralls.io/github/devilwjp/veaury?branch=master\"\u003e\u003cimg src=\"https://coveralls.io/repos/github/devilwjp/veaury/badge.svg?branch=master\" alt=\"Coverage Status\"\u003e\u003c/a\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/veaury\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/veaury\" alt=\"Version\"\u003e\u003c/a\u003e\r\n  \u003ca href=\"https://npmcharts.com/compare/veaury?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/veaury\" alt=\"Downloads\"\u003e\u003c/a\u003e\r\n  \u003ca href=\"https://www.npmjs.com/package/veaury\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/veaury\" alt=\"Size\"\u003e\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\r\n\n- [合作和机会](#%E5%90%88%E4%BD%9C%E5%92%8C%E6%9C%BA%E4%BC%9A)\n- [What is Veaury?](#what-is-veaury)\n- [The greatest feature](#the-greatest-feature)\n- [Legacy](#legacy)\n- [Latest documentation](#latest-documentation)\n- [Use cases](#use-cases)\n- [Installation](#installation)\n- [Do you want to preconfigure your project in advance?](#do-you-want-to-preconfigure-your-project-in-advance)\n  - [Webpack](#webpack)\n  - [Vite](#vite)\n- [Using Veaury in the SSR projects](#using-veaury-in-the-ssr-projects)\n- [Usage](#usage)\n  - [Vue in React - Basic usage](#vue-in-react---basic-usage)\n  - [React in Vue - Basic usage](#react-in-vue---basic-usage)\n    - [If `react-dom 19` and above is installed in your vue project, you should use `veaury@^2.6.0`.](#if-react-dom-19-and-above-is-installed-in-your-vue-project-you-should-use-veaury%5E260)\n  - [Vue in React - Usage of events](#vue-in-react---usage-of-events)\n  - [React in Vue - Usage of events](#react-in-vue---usage-of-events)\n  - [Vue in React - Usage of slots](#vue-in-react---usage-of-slots)\n  - [React in Vue - Usage of render props and React node](#react-in-vue---usage-of-render-props-and-react-node)\n  - [Context](#context)\n    - [Vue in React - Usage of Provider / useContext](#vue-in-react---usage-of-provider--usecontext)\n    - [React in Vue - Usage of Provide / Inject](#react-in-vue---usage-of-provide--inject)\n  - [Usage of VueContainer in React Component](#usage-of-vuecontainer-in-react-component)\n  - [Usage of getVNode](#usage-of-getvnode)\n  - [Usage of getReactNode](#usage-of-getreactnode)\n  - [Usage of RenderReactNode](#usage-of-renderreactnode)\n  - [Vue in React, Usage of v-model / v-models](#vue-in-react-usage-of-v-model--v-models)\n  - [Option useInjectPropsFromWrapper](#option-useinjectpropsfromwrapper)\n    - [Usage of injecting React hooks in Vue component](#usage-of-injecting-react-hooks-in-vue-component)\n    - [Usage of injecting Vue hooks in React component](#usage-of-injecting-vue-hooks-in-react-component)\n  - [Crossing provider](#crossing-provider)\n    - [Usage of createCrossingProviderForVueInReact](#usage-of-createcrossingproviderforvueinreact)\n    - [Usage of createCrossingProviderForReactInVue](#usage-of-createcrossingproviderforreactinvue)\n  - [ReactMissVue](#reactmissvue)\n    - [Usage of createReactMissVue](#usage-of-createreactmissvue)\n  - [Usage of lazyReactInVue](#usage-of-lazyreactinvue)\n  - [Usage of lazyVueInReact](#usage-of-lazyvueinreact)\n  - [Usage of getting ref](#usage-of-getting-ref)\n- [Typescript JSX types conflict caused by Vue and React at the same time.](#typescript-jsx-types-conflict-caused-by-vue-and-react-at-the-same-time)\n- [Development Setup](#development-setup)\n- [Project Structure](#project-structure)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\r\n## 合作和机会  \r\n正在寻求商业合作的可能性，或者您的公司愿意提供一份适合我的工作机会，我也会考虑(wechat: devilwjp_new / QQ: 9700616)  \r\n- 帮助您的项目做兼容和迁移\r\n- 帮助您vue或react的组件库，同时存在另一种技术栈版本\r\n- 帮助您的sdk同时具备支持vue和react的项目\r\n- 开源的是免费版，可为企业和个人提供定制版需求\r\n\r\n## What is Veaury?  \r\nVeaury (pronounced /ˈvjuːri/, inspired by 'beauty') is a tool library.\r\nIt is built on the Vue and React framework. It's use cases include using both Vue and React in one app, migrating from React to Vue or from Vue to React, and using third-party Vue and React Components, such as `antd`, `element-ui`, `vuetify`.    \r\n\r\n## The greatest feature  \r\n- 🌞 Support Vue3   \r\n- 🌈 Support Context - Share the context of all vue and react components.  \r\n- 💗 Support for using hooks across frameworks - You can use React's hooks in a Vue component, or you can use Vue's 'setup' function in a React component and use Vue's hooks in this function.  \r\n- 🪂 Pure mode - The children of the converted component no longer have an extra element container. [\u003e\u003elearn more about how the pure mode works](https://github.com/devilwjp/veaury/blob/master/pure_mode.md)  \r\n\r\n## Legacy\r\nThe perfect [tool library](https://github.com/devilwjp/vuereact-combined) which can use React in Vue2 and Vue2 in React.  \r\n\r\n## Latest documentation  \r\nView the latest [documentation](https://github.com/devilwjp/veaury#readme)  \r\n[中文文档](https://github.com/devilwjp/veaury/blob/master/README_zhcn.md)\r\n\r\n## Use cases\r\n- 👨‍👩‍👧 Using both Vue and React in one app\r\n- 🏃 Migrating from React to Vue or from Vue to React\r\n- 📲 Using third-party Vue and React Components, such as `antd`, `element-ui`, `vuetify`\r\n\r\n## Installation\r\n\r\n```sh\r\n# Install with yarn:\r\n$ yarn add veaury\r\n# or with npm:\r\n$ npm i veaury -S\r\n```\r\n\r\n## Do you want to preconfigure your project in advance?\r\n\r\nIn theory, you don't need to do additional configuration in a React project to support Vue, nor do you need to do additional configuration in a Vue project to support React.  \r\n  \r\nIf the React or Vue component you want to convert comes from a npm package, or has already been built (Not a direct vue file and does not contain jsx), you can use `applyPureReactInVue` or `applyVueInReact` directly.  \r\n  \r\nIf you need to develop both Vue and React in a project, instead of just using an existing npm component (There are both .vue files and react jsx files in a project source code), then you should do some configuration.   \r\n  \r\n### Webpack  \r\n[How to configure React in the Vue project from '@vue/cli' ](https://github.com/devilwjp/veaury/tree/master/dev-project-vue3)  \r\n[How to configure Vue in the React project from 'create-react-app' ](https://github.com/devilwjp/veaury/tree/master/dev-project-react)\r\n\r\n### Vite\r\nIf it is a project built by `vite`, the relevant configuration is as follows.  \r\nFirst install `@vitejs/plugin-react`, `@vitejs/plugin-vue` and `@vitejs/plugin-vue-jsx`.  \r\n\r\n+ The main project is Vue:  \r\n```js\r\nimport { defineConfig } from 'vite'\r\n\r\n// If mode cjs(vite.config.cjs), should use `veaury/vite/cjs/index.cjs`\r\n// If mode esm(vite.config.mjs), should use `veaury/vite/esm/index.mjs`\r\n// If the configuration file of vite has a `.js` suffix(vite.config.js), it is recommended to import it in the following way.\r\nimport veauryVitePlugins from 'veaury/vite/index.js'\r\n\r\nexport default defineConfig({\r\n  plugins: [\r\n    // Turn off vue and vuejsx plugins\r\n    // vue(),\r\n    // vueJsx(),\r\n    // When the type of veauryVitePlugins is set to vue, \r\n    // only jsx in files in the directory named 'react_app' will be parsed with react jsx,\r\n    // and jsx in other files will be parsed with vue jsx\r\n    veauryVitePlugins({\r\n      type: 'vue',\r\n      // Configuration of @vitejs/plugin-vue\r\n      // vueOptions: {...},\r\n      // Configuration of @vitejs/plugin-react\r\n      // reactOptions: {...}, \r\n      // Configuration of @vitejs/plugin-vue-jsx\r\n      // vueJsxOptions: {...}\r\n    })\r\n  ]\r\n})\r\n```  \r\n+ The main project is React:  \r\n```js\r\nimport { defineConfig } from 'vite'\r\n\r\n// If mode cjs(vite.config.cjs), should use `veaury/vite/cjs/index.cjs`\r\n// If mode esm(vite.config.mjs), should use `veaury/vite/esm/index.mjs`\r\n// If the configuration file of vite has a `.js` suffix(vite.config.js), it is recommended to import it in the following way.\r\nimport veauryVitePlugins from 'veaury/vite/index.js'\r\n\r\nexport default defineConfig({\r\n  plugins: [\r\n    // Turn off react plugin\r\n    // react(),\r\n    // When the type of veauryVitePlugins is set to react, \r\n    // only jsx in .vue files and files in a directory named \"vue_app\" will be parsed using vue jsx, \r\n    // jsx in other files will be parsed with react jsx\r\n    veauryVitePlugins({\r\n      type: 'react',\r\n      // Configuration of @vitejs/plugin-vue\r\n      // vueOptions: {...},\r\n      // Configuration of @vitejs/plugin-react\r\n      // reactOptions: {...}, \r\n      // Configuration of @vitejs/plugin-vue-jsx\r\n      // vueJsxOptions: {...}\r\n    })\r\n  ]\r\n})\r\n\r\n```\r\nIf you want to customize the compilation scope of vueJsx, you can configure overrides by setting type to `custom`.  \r\nUse `vueJsxInclude` and `vueJsxExclude` to configure the file range to be parsed using vue jsx, the others will be parsed using react jsx.  \r\n```js\r\nimport { defineConfig } from 'vite'\r\n\r\n// If mode cjs(vite.config.cjs), should use `veaury/vite/cjs/index.cjs`\r\n// If mode esm(vite.config.mjs), should use `veaury/vite/esm/index.mjs`\r\n// If the configuration file of vite has a `.js` suffix(vite.config.js), it is recommended to import it in the following way.\r\nimport veauryVitePlugins from 'veaury/vite/index.js'\r\n\r\nexport default defineConfig({\r\n  plugins: [\r\n    veauryVitePlugins({\r\n      type: 'custom',\r\n      // Only jsx in .vue files and files in a directory named \"react_app\" will be parsed using vue jsx , others will be parsed using react jsx.\r\n      vueJsxInclude: [/vue\u0026type=script\u0026lang\\.[tj]sx$/i, /vue\u0026type=script\u0026setup=true\u0026lang\\.[tj]sx$/i, /[/\\\\]vue_app[\\\\/][\\w\\W]+\\.[tj]sx$/],\r\n      // vueJsxExclude: [],\r\n      // Configuration of @vitejs/plugin-vue\r\n      // vueOptions: {...},\r\n      // Configuration of @vitejs/plugin-react\r\n      // reactOptions: {...}, \r\n      // Configuration of @vitejs/plugin-vue-jsx\r\n      // vueJsxOptions: {...}\r\n    })\r\n  ]\r\n})\r\n```\r\n\r\n## Using Veaury in the SSR projects    \r\nIf your project uses the SSR framework, you can still use Veaury normally. The component converted through Veaury should be a client component.  \r\nAnd allows creating `.vue` files in `Next.js`, or `.jsx` files of React in `Nuxt.js`.  \r\n\r\nThe following are examples of using Veaury in Next.js and Nuxt.js respectively.  \r\n[How to create and use Vue components using Veaury in Next.js](https://github.com/devilwjp/veaury_in_nextjs)  \r\n[How to create and use React components using Veaury in Nuxt.js](https://github.com/devilwjp/veaury_in_nuxtjs)  \r\n\r\n## Usage\r\n\r\n### Vue in React - Basic usage\r\n\r\n```jsx\r\nimport {applyVueInReact, applyPureVueInReact} from 'veaury'\r\n// This is a Vue component\r\nimport BasicVueComponent from './Basic.vue'\r\nimport {useState} from 'react'\r\n// Use HOC 'applyVueInReact'\r\nconst BasicWithNormal = applyVueInReact(BasicVueComponent)\r\n// Use HOC 'applyPureVueInReact'\r\nconst BasicWithPure = applyPureVueInReact(BasicVueComponent)\r\nexport default function () {\r\n  const [foo] = useState('Hello!')\r\n  return \u003c\u003e\r\n    \u003cBasicWithNormal foo={foo}\u003e\r\n      \u003cdiv\u003e\r\n        the default slot\r\n      \u003c/div\u003e\r\n    \u003c/BasicWithNormal\u003e\r\n    \u003cBasicWithPure foo={foo}\u003e\r\n      \u003cdiv\u003e\r\n        the default slot\r\n      \u003c/div\u003e\r\n    \u003c/BasicWithPure\u003e\r\n  \u003c/\u003e\r\n}\r\n```  \r\n\r\n### React in Vue - Basic usage\r\n#### If `react-dom 19` and above is installed in your vue project, you should use `veaury@^2.6.0`.  \r\n`react-dom 19` no longer supports dynamically determining whether to use `render` or `createRoot`. In order to be compatible with `react-dom 17` and previous versions, you need to manually configure `createRoot` in the veaury configuration.  \r\n\r\n```js\r\n// react-dom \u003e= 19, You only need to configure it globally once\r\nimport { createRoot } from 'react-dom/client'\r\nimport { setVeauryOptions } from 'veaury'\r\nsetVeauryOptions({\r\n  react: {\r\n    createRoot\r\n  }\r\n})\r\n```\r\n\r\nIf `createRoot` is not configured in react-dom 19 and above, the following error will be reported\r\n![image](https://github.com/user-attachments/assets/1abeec7d-a78c-4a1b-b2df-e113f72fa3c4)\r\n\r\n\r\n\r\n\r\n`applyPureReactInVue` is recommended.\r\n[Learn about the difference between `applyPureReactInVue` and `applyReactInVue`.](https://github.com/devilwjp/veaury/blob/master/pure_mode.md)   \r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cBasicPure :foo=\"foo\"\u003e\r\n    \u003cdiv\u003e\r\n      the children\r\n    \u003c/div\u003e\r\n  \u003c/BasicPure\u003e\r\n\u003c/template\u003e\r\n\u003cscript\u003e\r\nimport {applyReactInVue, applyPureReactInVue} from 'veaury'\r\n// This is a React component\r\nimport BasicReactComponent from './react_app/Basic.jsx'\r\nimport {ref} from 'vue'\r\n\r\nexport default {\r\n  components: {\r\n    // Use HOC 'applyReactInVue' or 'applyPureReactInVue'\r\n    Basic: applyReactInVue(BasicReactComponent), \r\n    BasicPure: applyPureReactInVue(BasicReactComponent)\r\n  },\r\n  setup() {\r\n    return {\r\n      foo: ref('Hello!')\r\n    }\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\n\u003e [!NOTE]\r\n\u003e \r\n\u003e When using `applyPureReactInVue` or `applyReactInVue` to perform two-way binding on some react components, if the values are modified frequently, the modification may not be timely. \r\n\u003e \r\n\u003e Veury provides a method `injectSyncUpdateForPureReactInVue` to solve this problem\r\n\u003e \r\n\u003e [\u003e\u003e The related issue](https://github.com/devilwjp/veaury/issues/119)\r\n\r\nLet's see an example.\r\n\r\n(React component Input.js)\r\n```jsx\r\nimport React from 'react'\r\n\r\nexport default function Input(props) {\r\n  return \u003cinput value={props.value} onChange={props.onChange}/\u003e\r\n}\r\n```\r\n\r\n(Vue page Example.vue)\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cSimpleInput :value=\"value\" @change=\"value = $event.target.value\"/\u003e\r\n\u003c/template\u003e\r\n\u003cscript setup\u003e\r\nimport { applyPureReactInVue, injectSyncUpdateForPureReactInVue} from 'veaury'\r\nimport ReactSimpleInput from \"./Input\";\r\n\r\n// The component only needs to be injected globally once. If injected multiple times, it is equivalent to appending and overwriting function hooks.\r\ninjectSyncUpdateForPureReactInVue(ReactSimpleInput, {\r\n  // The name of the hook function that determines the content update of the Input component\r\n  onChange(args) {\r\n    return {\r\n      value: args.target.value\r\n    }\r\n  }\r\n})\r\n\r\nconst SimpleInput = applyPureReactInVue(ReactSimpleInput)\r\nconst value = ref(\"\");\r\n\u003c/script\u003e\r\n```\r\n\r\n\r\n### Vue in React - Usage of events\r\n\r\n```jsx\r\nimport {applyVueInReact} from 'veaury'\r\nimport BasicVue from './Basic.vue'\r\nimport {useState} from 'react'\r\n\r\nconst Basic = applyVueInReact(BasicVue)\r\nexport default function () {\r\n  function onClickForVue() {\r\n    console.log('clicked!')\r\n  }\r\n\r\n  return \u003cdiv\u003e\r\n    {/*Trigger with $emit('click') in Vue component*/}\r\n    \u003cBasic onClick={onClickForVue}/\u003e\r\n  \u003c/div\u003e\r\n}\r\n```\r\n\r\n### React in Vue - Usage of events\r\n\r\n```vue\r\n\r\n\u003ctemplate\u003e\r\n  \u003c!-- Trigger with 'props.onClick()' in React component --\u003e\r\n  \u003cReactButton @click=\"onClickForReact\"/\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport {ref} from 'vue'\r\nimport {applyPureReactInVue} from 'veaury'\r\n// This is a React Component\r\nimport ReactButton from \"./react_app/Button.jsx\"\r\n\r\nexport default {\r\n  components: {\r\n    ReactButton: applyPureReactInVue(ReactButton)\r\n  },\r\n  setup() {\r\n    function onClickForReact() {\r\n      console.log('clicked!')\r\n    }\r\n\r\n    return {\r\n      onClickForReact,\r\n    }\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\n### Vue in React - Usage of slots\r\n\r\nThe usage of 'slots' is similar to the usage of 'v-slots' of Vue's jsx.\r\n\r\n```jsx\r\nimport {applyVueInReact} from 'veaury'\r\nimport BasicVue from './Basic.vue'\r\n\r\nconst Basic = applyVueInReact(BasicVue)\r\nexport default function () {\r\n  const vSlots = {\r\n    // Render with '\u003cslot name=\"slot1\" /\u003e' in Vue Component\r\n    slot1: \u003cdiv\u003ethis is slot1(namedSlot)\u003c/div\u003e,\r\n    // Render with '\u003cslot name=\"slot2\" value=\"xxxxxx\"/\u003e' in Vue Component\r\n    slot2: ({value}) =\u003e \u003cdiv\u003ethis is slot2(scopedSlot), and receive value: {value}\u003c/div\u003e,\r\n    // Render with '\u003cslot/\u003e' in Vue Component\r\n    default: \u003cdiv\u003ethis is children\u003c/div\u003e\r\n  }\r\n  return \u003cdiv\u003e\r\n    {/*just send children*/}\r\n    \u003cBasic\u003e\r\n      {/* Render with '\u003cslot/\u003e' in Vue Component */}\r\n      \u003cdiv\u003ethis is children\u003c/div\u003e\r\n    \u003c/Basic\u003e\r\n    {/*send v-slots*/}\r\n    \u003cBasic v-slots={vSlots}/\u003e\r\n    {/*another usage*/}\r\n    \u003cBasic\u003e\r\n      {vSlots}\r\n    \u003c/Basic\u003e\r\n  \u003c/div\u003e\r\n}\r\n```\r\n\r\n### React in Vue - Usage of render props and React node\r\n\r\nNamed slots \u0026 scoped slots of Vue = React render props.  \r\nDefault slots $ children of Vue = React props.children.  \r\nA named slot has a name prefixed with `node:` = React Node  \r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cBasic\u003e\r\n    \u003c!--  Render with 'props.slot1()' in React component  --\u003e\r\n    \u003ctemplate v-slot:slot1\u003e\r\n      \u003cdiv\u003e\r\n        this is slot1 (render props)\r\n      \u003c/div\u003e\r\n    \u003c/template\u003e\r\n    \u003c!--  Render with 'props.slot2(\"xxxxx\")' in React component  --\u003e\r\n    \u003ctemplate v-slot:slot2=\"bar\"\u003e\r\n      \u003cdiv\u003e\r\n        this is slot2 (render props)\u003cbr/\u003e\r\n        this content is passed from React: {{bar}}\r\n      \u003c/div\u003e\r\n    \u003c/template\u003e\r\n    \u003c!--  Render with 'props.slot3' in React component  --\u003e\r\n    \u003ctemplate v-slot:node:slot3\u003e\r\n      \u003cdiv\u003e\r\n        this is slot3 (react node)\r\n      \u003c/div\u003e\r\n    \u003c/template\u003e\r\n    \u003c!--  Render with 'props.children' in React component  --\u003e\r\n    \u003cdiv\u003e\r\n      this is children (react node)\r\n    \u003c/div\u003e\r\n  \u003c/Basic\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport {applyPureReactInVue} from 'veaury'\r\n// This is a React Component\r\nimport ReactBasic from \"./react_app/Slots.jsx\"\r\n\r\nexport default {\r\n  components: {\r\n    Basic: applyPureReactInVue(ReactBasic)\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\n### Context\r\n\r\nVeaury will judge that if there is a wrapper layer of the same framework in the outer layer, Veaury will use React's `Portal` and Vue's `Teleport` instead of creating a new application instance every time.   \r\n  \r\nIt's a really awesome! Veaury can well pass the root node context to the child nodes, regardless of whether the node is wrapped or not.  \r\n\r\nThis means that a Vue component used a React component, and then this React component used another Vue subcomponent. This Vue subcomponent can get the context of the outer Vue component.  \r\n\r\n#### Vue in React - Usage of Provider / useContext\r\n\r\n```jsx\r\nimport {applyVueInReact} from 'veaury'\r\nimport BasicVue from './Basic.vue'\r\nimport {createContext, useContext} from 'react'\r\n\r\nconst Basic = applyVueInReact(BasicVue)\r\n// Create React context object\r\nconst Context = createContext({})\r\n\r\nfunction SubReactComponent() {\r\n  // Get context value\r\n  const {bossName} = useContext(Context)\r\n  return \u003cdiv className=\"slot\"\u003ebossName from Context: {bossName}\u003c/div\u003e\r\n}\r\n\r\nexport default function () {\r\n  // Set context value\r\n  return \u003cContext.Provider value={{bossName: 'God'}}\u003e\r\n    \u003cBasic\u003e\r\n      {/* This React component can get the context value from 'Provider' */}\r\n      \u003cSubReactComponent/\u003e\r\n    \u003c/Basic\u003e\r\n  \u003c/Context.Provider\u003e\r\n}\r\n```\r\n\r\n#### React in Vue - Usage of Provide / Inject\r\n\r\n```vue\r\n\r\n\u003ctemplate\u003e\r\n  \u003cBasic\u003e\r\n    \u003c!--  This Vue component can get the injection value from 'provide'  --\u003e\r\n    \u003cSubVueComponent/\u003e\r\n  \u003c/Basic\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport {provide, inject, h} from 'vue'\r\nimport {applyPureReactInVue} from 'veaury'\r\n// This is a React component\r\nimport ReactBasic from \"./react_app/Basic\"\r\n// This is a Vue component\r\nconst SubVueComponent = {\r\n  setup() {\r\n    // get bossName from injection\r\n    const bossName = inject('bossName')\r\n    return h('div', () =\u003e bossName)\r\n  }\r\n}\r\n\r\nexport default {\r\n  components: {\r\n    Basic: applyPureReactInVue(ReactBasic),\r\n    SubVueComponent\r\n  },\r\n  setup() {\r\n    // Use 'provide' to set the value of bossName\r\n    provide('bossName', 'God')\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\n### Usage of VueContainer in React Component\r\n\r\nYou can use the `VueContainer` component in a React component to display Vue components directly.  \r\n  \r\nWhen React components in Vue components, `VueContainer` can display global Vue components registered in the upper-level Vue app.  \r\n\r\n```jsx\r\nimport {VueContainer} from \"veaury\"\r\nimport BasicVue from './Basic.vue'\r\n\r\nexport default function ReactComponent() {\r\n  const passedProps = {\r\n    name: 'Mike'\r\n  }\r\n  // Render '\u003crouter-view\u003e' if 'vue-router' exists, You can use '\u003cVueContainer component=\"RouterView\"/\u003e'\r\n  return \u003cVueContainer component={BasicVue} {...passedProps}/\u003e\r\n}\r\n```\r\n`VueContainer` can also render VNodes.  \r\n```jsx\r\nimport {VueContainer} from \"veaury\"\r\nimport {h} from 'vue'\r\n\r\nconst VNode = h('div', null, () =\u003e 'This is a VNode')\r\nexport default function ReactComponent() {\r\n  return \u003cVueContainer node={VNode}/\u003e\r\n}\r\n```\r\n\r\n### Usage of getVNode  \r\nVNode = `getVNode`(ReactNode)  \r\nIn most cases, vue components follow the SFC specification, but you can also create vue components in other ways, such as `h` or jsx, which may get VNode through properties.  \r\nWhen passing a property of type VNode to a vue component in react, you can use `getVNode`.  \r\n```jsx\r\nimport { applyVueInReact, getVNode } from 'veaury'\r\nimport AAVue from './AA.vue'\r\n\r\nconst AA = applyVueInReact(AAVue)\r\nconst VNodeBar = getVNode(\r\n  \u003cdiv style={{background: '#105a31', marginTop: '5px', color: 'white'}}\u003e\r\n    \u003cdiv\u003erendered with a property\u003c/div\u003e\r\n    \u003cdiv\u003eThis is Bar's VNode\u003c/div\u003e\r\n  \u003c/div\u003e\r\n)\r\nexport default function ReactComponent () {\r\n  // `VNodeBar` is a property of type VNode, so use getVNode to convert reactNode to VNode.\r\n  return \u003cAA VNodeBar={VNodeBar}/\u003e\r\n}\r\n```\r\n\r\n### Usage of getReactNode  \r\nReactNode = `getReactNode`(VNode)  \r\nSometimes the property of the react component is a complex data structure, which contains ReactNode, and in the vue file, the definition of jsx will be compiled into vue's jsx.\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cAA :prop1=\"propForReact\"/\u003e\r\n\u003c/template\u003e\r\n\u003cscript setup lang=\"jsx\"\u003e\r\nimport { getReactNode, applyPureReactInVue } from 'veaury'\r\nimport AAReact from './react_app/AA.jsx'\r\nconst AA = applyPureReactInVue(AAReact)\r\nconst propForReact = {\r\n  foo: 'Mike',\r\n  bar: [{\r\n    body: getReactNode(\u003cdiv\u003eJohn\u003c/div\u003e)\r\n  }],\r\n  render: (name) =\u003e getReactNode(\u003cdiv\u003e{name}\u003c/div\u003e)\r\n}\r\n\u003c/script\u003e\r\n```\r\n\r\n### Usage of RenderReactNode\r\nSometimes the input parameter of the render props of the react component is ReactNode.  \r\n`RenderReactNode` is a vue component that accepts a `node` parameter and can render ReactNode in a Vue component.  \r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cAA\u003e\r\n    \u003ctemplate v-slot:prop2=\"itemReactNode\"\u003e\r\n      \u003cRenderReactNode :node=\"itemReactNode\"/\u003e\r\n    \u003c/template\u003e\r\n  \u003c/AA\u003e\r\n\u003c/template\u003e\r\n\u003cscript setup\u003e\r\nimport { RenderReactNode, applyPureReactInVue } from 'veaury'\r\nimport AAReact from './react_app/AA.jsx'\r\nconst AA = applyPureReactInVue(AAReact)\r\n\u003c/script\u003e\r\n```\r\n\r\n### Vue in React, Usage of v-model / v-models\r\nThe usage of 'v-model' is similar to the usage of 'v-model' of Vue's jsx.  \r\nThe value type of the `v-model` property should be  \r\n`[ modelValue, modelSetter, argumentKey, argumentModifiers ]`  \r\n`[ modelValue, modelSetter, argumentModifiers ]`  \r\n`[ modelValue, modelSetter ]`  \r\nAdditional 'argumentKey' attached property, such as `v-model-god={[godValue, setGodValue]}` = `v-model={[godValue, setGodValue, 'god']}`\r\n```typescript\r\n// types\r\ntype modelValue = any\r\ntype modelSetter = (newValue) =\u003e void\r\ntype argumentKey = string\r\ntype argumentModifiers = string[]\r\n```\r\n```jsx\r\nimport {applyVueInReact} from 'veaury'\r\nimport BasicVue from './Basic.vue'\r\nimport Basic1Vue from './Basic1.vue'\r\nimport {useState} from 'react'\r\n\r\nconst Basic = applyVueInReact(BasicVue)\r\nconst Basic1 = applyVueInReact(Basic1Vue)\r\nexport default function () {\r\n  const [foo, setFoo] = useState(Math.random())\r\n  const [bar, setBar] = useState(Math.random())\r\n  const [zoo, setZoo] = useState(Math.random())\r\n\r\n  return \u003cdiv\u003e\r\n    \u003cBasic v-model={[foo, setFoo]} v-model-bar={[bar, setBar]} /\u003e\r\n    {/*\u003cBasic1 v-model={[zoo, setZoo, 'zoo']}/\u003e*/}\r\n    {/*\u003cBasic1 v-model={[zoo, setZoo, 'zoo', ['number']]}/\u003e*/}\r\n    {/*\u003cBasic1 v-model-zoo={[zoo, setZoo, ['number']]}/\u003e*/}\r\n    \u003cBasic1 v-models={{\r\n      // The key value of 'modelValue' is equivalent to 'v-model'\r\n      modelValue: [zoo, setZoo],\r\n      //...otherModels\r\n    }} /\u003e\r\n  \u003c/div\u003e\r\n}\r\n\r\n```\r\n### Option useInjectPropsFromWrapper\r\n`useInjectPropsFromWrapper` is an option to `applyReactInVue` and `applyVueInReact`.\r\n  \r\nWhen developing Vue and React applications at the same time, sometimes it is necessary to obtain the context of the React app inside the Vue component, and vice versa.  \r\n  \r\nFor example, to get information from `react-router` in Vue components, or to get state from `vuex` in React components.\r\n\r\n#### Usage of injecting React hooks in Vue component\r\nReact application uses Vue component, example to get `react-router` inside Vue component.  \r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cdiv class=\"vue-component\"\u003e\r\n    \u003ch3\u003eThis is the Vue Component.\u003c/h3\u003e\r\n    the path info from 'react-router': \u003cspan style=\"font-weight: bold\"\u003e{{fullPath}}\u003c/span\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n    \u003cbutton @click=\"changeQuery\"\u003echange query\u003c/button\u003e\r\n  \u003c/div\u003e\r\n\u003c/template\u003e\r\n\u003cscript\u003e\r\nimport { computed } from 'vue'\r\n\r\nexport default {\r\n  props: ['reactRouter'],\r\n  // do not destructure props\r\n  setup(props) {\r\n    function changeQuery() {\r\n      props.reactRouter?.navigate(`?a=${Math.random()}`, {replace: true})\r\n    }\r\n    const fullPath = computed(() =\u003e {\r\n      const { location } = props.reactRouter || {}\r\n      return location?.pathname + location?.search\r\n    })\r\n    return {\r\n      fullPath,\r\n      changeQuery\r\n    }\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\nUse `applyVueInReact` to wrap the above Vue component into a React component, and pass in `react-router`\r\n```js\r\nimport { applyVueInReact } from 'veaury'\r\nimport { useLocation, useNavigate } from 'react-router-dom'\r\nimport AboveVueComponent from './AboveVueComponent'\r\n\r\nexport default applyVueInReact(AboveVueComponent, {\r\n  useInjectPropsFromWrapper(reactProps) {\r\n    // React hooks can be used in this function\r\n    // Use the hooks of react-router-dom\r\n    const location = useLocation()\r\n    const navigate = useNavigate()\r\n\r\n    // The returned object will be passed to the Vue component as props\r\n    return {\r\n      reactRouter: {\r\n        navigate,\r\n        location\r\n      }\r\n    }\r\n  }\r\n})\r\n```\r\n\r\n#### Usage of injecting Vue hooks in React component\r\nVue application uses React component, example to get `vue-router` and `vuex` inside React component.  \r\nThere are two modes for injecting functions, 'setup' and 'computed' modes.  \r\n```jsx\r\nimport React from 'react'\r\nimport {toRef} from 'vue'\r\nimport {useStore} from 'vuex'\r\nimport {useRoute, useRouter} from 'vue-router'\r\nimport {applyPureReactInVue} from 'veaury'\r\n\r\n// This React component will be used in the Vue app and needs to use the vue-router and vuex hooks\r\n\r\n// setup mode\r\nfunction VueInjectionHookInSetupMode(vueProps) {\r\n  // Vue hooks can be used in this function\r\n  // This function will be called in the 'setup' hook of the Vue wrapper component\r\n  const store = useStore()\r\n  const route = useRoute()\r\n  const router = useRouter()\r\n\r\n  // The returned object will be passed to the React component as props\r\n  return {\r\n    // you need to manually convert to proxy with 'setup' mode\r\n    // otherwise it will not be responsive\r\n    fullPath: toRef(route, 'fullPath'),\r\n    count: toRef(store.state, 'count'),\r\n    changeQuery: () =\u003e router.replace({\r\n      query: {\r\n        a: Math.random()\r\n      }\r\n    }),\r\n    incrementCount: () =\u003e store.dispatch('increment')\r\n  }\r\n}\r\n\r\n// computed mode\r\nfunction VueInjectionHookInComputedMode(vueProps) {\r\n  // The context of the function is binding with the proxy from the 'getCurrentInstance' hook\r\n  // Returning a function represents the computed of the options api\r\n  // All logic code should be written in this computed function.\r\n  // The lifecycle cannot be used in this function. If you want to use the lifecycle, you can only use the 'setup' mode\r\n  return function computedFunction() {\r\n    return {\r\n      fullPath: this.$route.fullPath,\r\n      count: this.$store.state.count,\r\n      changeQuery: () =\u003e this.$router.replace({\r\n        query: {\r\n          a: Math.random()\r\n        }\r\n      }),\r\n      incrementCount: () =\u003e this.$store.dispatch('increment')\r\n    }\r\n  }\r\n}\r\n\r\nfunction ReactComponent (props) {\r\n  return (\u003cdiv\u003e\r\n    This is the React Component\r\n    \u003cspan\u003e\r\n      the path info from 'vue-router': \u003cspan style={{fontWeight: 'bold'}}\u003e{props.fullPath}\u003c/span\u003e\u003cbr/\u003e\r\n      the count from 'vuex': \u003cspan style={{fontWeight: 'bold'}}\u003e{props.count}\u003c/span\u003e\r\n    \u003c/span\u003e\u003cbr/\u003e\r\n    \u003cbutton onClick={props.changeQuery}\u003echange query\u003c/button\u003e \u003cbutton onClick={props.incrementCount}\u003eincrement count\u003c/button\u003e\r\n  \u003c/div\u003e)\r\n}\r\n\r\n// Vue's injection function has two modes: 'setup' and 'computed'.\r\n// Refer to the case of the above two injection function types.\r\n// Also try replacing the option injectPropsFromWrapper with 'VueInjectionHookInComputedMode'\r\nexport default applyPureReactInVue(ReactComponent, {\r\n  useInjectPropsFromWrapper: VueInjectionHookInSetupMode\r\n})\r\n\r\n```\r\n### Crossing provider\r\nAlthough it is possible to use hooks from another framework via `useInjectPropsFromWrapper` and get them via properties, but in most cases, it is to get context type data, such as vue-router, react-router, redux, vuex, or another framework custom context.  \r\n\r\nUse `createCrossingProviderForReactInVue` and `createCrossingProviderForVueInReact` to create cross-frame providers, and components of another framework within the provider can get the context from this framework.  \r\n\r\n#### Usage of createCrossingProviderForVueInReact\r\nCreate a react-router provider and a vue hooks that can be executed in the setup function of the Vue component and get the react-router. (reactRouterCrossingProvider.js)\r\n```jsx\r\n// Create a Provider that can get react hooks\r\n// This Provider will be exported as a react component,\r\n// and all of the vue components in this Provider can get the status of react hooks\r\n\r\nimport { useLocation, useNavigate } from 'react-router-dom'\r\nimport { createCrossingProviderForVueInReact } from 'veaury'\r\n\r\n// Execute 'useReactRouterForVue' in the setup function of the vue component to get the object returned by the incoming function\r\nconst [useReactRouterForVue, ReactRouterProviderForVue] = createCrossingProviderForVueInReact(\r\n  // This incoming function can execute react hooks\r\n  function() {\r\n    return {\r\n      location: useLocation(),\r\n      navigate: useNavigate()\r\n    }\r\n  }\r\n)\r\n\r\nexport {\r\n  useReactRouterForVue,\r\n  ReactRouterProviderForVue\r\n}\r\n```\r\nThe vue component(Basic.vue) can get the context from the provider through the custom hook returned by `createCrossingProviderForVueInReact`.\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cdiv class=\"vue-component\"\u003e\r\n    \u003ch3\u003eThis is the Vue Component.\u003c/h3\u003e\r\n    the path info from 'react-router': \u003cspan style=\"font-weight: bold\"\u003e{{pathname + search}}\u003c/span\u003e\u003cbr/\u003e\u003cbr/\u003e\r\n    \u003cbutton @click=\"changeQuery\"\u003echange query\u003c/button\u003e\r\n  \u003c/div\u003e\r\n\u003c/template\u003e\r\n\u003cscript\u003e\r\nimport { useReactRouterForVue } from './reactRouterCrossingProvider'\r\nimport React from 'react'\r\n\r\nexport default {\r\n  setup() {\r\n    const { location, navigate } = useReactRouterForVue()\r\n    function changeQuery() {\r\n      navigate(`?a=${Math.random()}`, {replace: true})\r\n    }\r\n    return {\r\n      pathname: location.pathname,\r\n      search: location.search,\r\n      changeQuery\r\n    }\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\nReact components use the provider, so that all vue components (including internal components) in the provider can get the context of this provider through custom hooks.\r\n```jsx\r\nimport {applyVueInReact} from 'veaury'\r\nimport BasicVue from './Basic.vue'\r\nimport { ReactRouterProviderForVue } from './reactRouterCrossingProvider'\r\n\r\nconst Basic = applyVueInReact(BasicVue)\r\nexport default function () {\r\n\r\n    return \u003cReactRouterProviderForVue\u003e\r\n            \u003cBasic/\u003e\r\n        \u003c/ReactRouterProviderForVue\u003e\r\n}\r\n\r\n```\r\n\r\n#### Usage of createCrossingProviderForReactInVue  \r\nIt is now recommended to use `createCrossingProviderForPureReactInVue` instead of `createCrossingProviderForReactInVue`.  \r\nCreate a provider including vue-router and vuex and a React hooks that can be executed in the React function component and get the vue-router and vuex. (vueRouterAndVuexCrossingProvider.js)\r\n```js\r\nimport {useStore} from 'vuex'\r\nimport {useRouter, useRoute} from 'vue-router'\r\nimport {createCrossingProviderForPureReactInVue} from 'veaury'\r\n\r\nconst [useVueHooksInReact, VueProviderForReact] = createCrossingProviderForPureReactInVue(function() {\r\n  return {\r\n    vuex: useStore(),\r\n    vueRoute: useRoute(),\r\n    vueRouter: useRouter()\r\n  }\r\n})\r\n\r\nexport {\r\n  useVueHooksInReact,\r\n  VueProviderForReact\r\n}\r\n```\r\nThe React component(Basic.js) can get the context from the provider through the custom hook.\r\n```jsx\r\nimport React from 'react'\r\nimport { useVueHooksInReact } from '../vueRouterAndVuexCrossingProvider'\r\n\r\nexport default function (props) {\r\n  const { vuex, vueRoute, vueRouter } = useVueHooksInReact()\r\n  function changeQuery() {\r\n    vueRouter.replace({\r\n      query: {\r\n        a: Math.random()\r\n      }\r\n    })\r\n  }\r\n  function incrementCount() {\r\n    vuex.dispatch('increment')\r\n  }\r\n  \r\n  return (\u003cdiv\u003e\r\n    This is the React Component\u003cbr/\u003e\r\n    \u003cspan\u003e\r\n      the path info from 'vue-router': \u003cspan style={{fontWeight: 'bold'}}\u003e{vueRoute.fullPath}\u003c/span\u003e\u003cbr/\u003e\r\n      the count from 'vuex': \u003cspan style={{fontWeight: 'bold'}}\u003e{vuex.state.count}\u003c/span\u003e\r\n    \u003c/span\u003e\u003cbr/\u003e\r\n    \u003cbutton onClick={changeQuery}\u003echange query\u003c/button\u003e \u003cbutton onClick={incrementCount}\u003eincrement count\u003c/button\u003e\r\n  \u003c/div\u003e)\r\n}\r\n```\r\nVue components use the provider, so that all React components (including internal components) in the provider can get the context of this provider through custom hooks.\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cVueProviderForReact\u003e\r\n    \u003cBasic/\u003e\r\n  \u003c/VueProviderForReact\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport { applyPureReactInVue } from 'veaury'\r\n// This is a React Component\r\nimport ReactBasic from \"./react_app/Basic\"\r\nimport {VueProviderForReact} from \"./vueRouterAndVuexCrossingProvider\";\r\n\r\nexport default {\r\n  components: {\r\n    VueProviderForReact,\r\n    Basic: applyPureReactInVue(ReactBasic),\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\n### ReactMissVue  \r\nSometimes some features and plugins of Vue are really more useful than React, such as `beforeEach` of `vue-router`, and `pinia`.  \r\nSo I implemented a factory function called `createReactMissVue` that returns a React provider component and a React hook.  \r\nWith ReactMissVue, you can use Vue's plugins directly in React applications.  \r\nEnjoy it!  \r\n\r\n#### Usage of createReactMissVue  \r\nFor detailed use cases, please refer to `dev-project-react/src/components/reactMissVue`  \r\n```jsx\r\nimport { defineStore, createPinia } from 'pinia'\r\nimport { createRouter, createWebHashHistory, useRouter, useRoute } from 'vue-router'\r\nimport { createReactMissVue, applyReactInVue, VueContainer } from 'veaury'\r\n\r\n// create vue-router instance\r\nconst router = createRouter({\r\n  // Using vue-router inside route 'ReactMissVue'\r\n  history: createWebHashHistory('/#/ReactMissVue'),\r\n  routes: [\r\n    {\r\n      name: '',\r\n      path: '/aaa',\r\n      component: applyReactInVue(() =\u003e \u003cdiv className=\"react-component\"\u003e\r\n        react use vue-router\u003cbr/\u003e\r\n        path: /aaa\r\n      \u003c/div\u003e)\r\n    },\r\n    {\r\n      name: 'empty',\r\n      path: '/:default(.*)',\r\n      component: applyReactInVue(() =\u003e \u003cdiv className=\"react-component\"\u003e\r\n        react use vue-router\u003cbr/\u003e\r\n        empty\r\n      \u003c/div\u003e)\r\n    },\r\n  ],\r\n})\r\n\r\n// create a pinia store\r\nconst useFooStore = defineStore({\r\n  id: 'foo',\r\n  state() {\r\n    return {\r\n      name: 'Eduardo'\r\n    }\r\n  },\r\n  actions: {\r\n    changeName(name) {\r\n      this.$patch({\r\n        name\r\n      })\r\n    }\r\n  }\r\n})\r\n\r\n// create a ReactMissVue instance\r\nlet [useReactMissVue, ReactMissVue, ReactMissVueContext] = createReactMissVue({\r\n  useVueInjection() {\r\n    // This object can be obtained by using useReactMissVue in the react component\r\n    return {\r\n      fooStore: useFooStore(),\r\n      vueRouter: useRouter(),\r\n      vueRoute: useRoute()\r\n    }\r\n  },\r\n  // beforeVueAppMount can only be used in the outermost ReactMissVue\r\n  // Because veaury will only create a vue application in the outermost layer\r\n  beforeVueAppMount(app) {\r\n    // register pinia\r\n    app.use(createPinia())\r\n    // register vue-router\r\n    app.use(router)\r\n  }\r\n})\r\n\r\nfunction Demo() {\r\n  const { fooStore } = useReactMissVue()\r\n  return \u003cdiv\u003e\r\n    \u003cdiv\u003e\r\n      Foo's name: {fooStore?.name}\r\n    \u003c/div\u003e\r\n    {/* Use the global component router-view */}\r\n    \u003cVueContainer component=\"RouterView\"/\u003e\r\n  \u003c/div\u003e\r\n}\r\n\r\nexport default function () {\r\n  return \u003cReactMissVue\u003e\r\n    \u003cDemo/\u003e\r\n  \u003c/ReactMissVue\u003e\r\n}\r\n```\r\n\r\n### Usage of lazyReactInVue\r\nIt is now recommended to use `lazyPureReactInVue` instead of `lazyReactInVue`.  \r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cBasic/\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport { lazyPureReactInVue } from 'veaury'\r\n\r\nexport default {\r\n  components: {\r\n    // import an async React component\r\n    // It is also possible to use the full parameter of the Vue3 API 'defineAsyncComponent'\r\n    // for example: lazyReactInVue({ loader: () =\u003e import('./react_app/Basic'), timeout: 3000 })\r\n    Basic: lazyPureReactInVue(() =\u003e import('./react_app/Basic'))\r\n  },\r\n}\r\n\u003c/script\u003e\r\n```\r\n### Usage of lazyVueInReact\r\n```jsx\r\nimport { lazyVueInReact, lazyPureVueInReact } from 'veaury'\r\n\r\nconst AsyncBasicWithNormal = lazyVueInReact(() =\u003e import('./Basic'))\r\nconst AsyncBasicWithPure = lazyPureVueInReact(() =\u003e import('./Basic'))\r\nexport default function () {\r\n  return \u003c\u003e\r\n    \u003cAsyncBasicWithNormal/\u003e\r\n    \u003cAsyncBasicWithPure/\u003e\r\n  \u003c/\u003e\r\n}\r\n```\r\n\r\n### Usage of getting ref\r\nGet the React component's instance in the Vue Component.  \r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003cBasic ref=\"Basic\"\u003e\r\n    \u003cdiv ref=\"div\"\u003ehello\u003c/div\u003e\r\n    \u003cAA ref=\"AA\"/\u003e\r\n  \u003c/Basic\u003e\r\n\u003c/template\u003e\r\n\u003cscript\u003e\r\nimport { applyPureReactInVue } from 'veaury'\r\nimport BasicReact from './Basic.jsx'\r\nimport AAReact from './AA.jsx'\r\nexport default {\r\n  components: {\r\n    Basic: applyPureReactInVue(BasicReact),\r\n    AA: applyPureReactInVue(AAReact)\r\n  },\r\n  mounted() {\r\n    // Get the real react instance through `__veauryReactRef__`\r\n    console.log(this.$refs.Basic.__veauryReactRef__)\r\n    // If the converted react component or dom element is placed as a child node in a pure mode react component, \r\n    // the ref can be obtained directly\r\n    console.log(this.$refs.div)\r\n    console.log(this.$refs.AA)\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\nGet the Vue component's instance in the React Component.\r\n```jsx\r\nimport {applyVueInReact} from 'veaury'\r\nimport BasicVue from './Basic.vue'\r\nimport React, { createRef, useEffect } from \"react\"\r\n\r\nconst Basic = applyVueInReact(BasicVue)\r\nexport default function () {\r\n  const basicInstance = createRef(null)\r\n  useEffect(() =\u003e {\r\n    // Get the real vue instance through `__veauryVueRef__`\r\n    console.log(basicInstance.current.__veauryVueRef__)\r\n  }, [])\r\n  return \u003cBasic ref={basicInstance}/\u003e\r\n}\r\n```\r\n## Typescript JSX types conflict caused by Vue and React at the same time.  \r\n\u003e If you can ignore the TS error warning in the IDE, you can skip this chapter.  \r\n\r\nVue(@vue/runtime-dom) and React(@types/react) both extend the type interface in the global namespace JSX, which will cause types conflicts.  \r\nFor example, JSX.Element cannot extend ReactElement and VNode at the same time.  \r\nSo if both Vue and React are installed in the project, it will cause TS error warning in JSX in IDE (such as vscode or webstorm) , but this will not affect the compilation of the development environment and production environment.  \r\nA working solution is to use `patch-package` to modify `@vue/runtime-dom/dist/runtime-dom.d.ts` and `@types/react/index.d.ts`, and make sure to set `compilerOptions.jsx` to `preserve` in tsconfig.json.  \r\nFor example, the changes to these two files are as follows.  \r\n\r\nnode_modules/@types/react/index.d.ts(@types/react@18.0.14)  \r\n```diff\r\ndiff --git a/node_modules/@types/react/index.d.ts b/node_modules/@types/react/index.d.ts\r\nindex 5c5d343..a850f38 100644\r\n--- a/node_modules/@types/react/index.d.ts\r\n+++ b/node_modules/@types/react/index.d.ts\r\n@@ -3118,7 +3118,9 @@ type ReactManagedAttributes\u003cC, P\u003e = C extends { propTypes: infer T; defaultProps\r\n \r\n declare global {\r\n     namespace JSX {\r\n-        interface Element extends React.ReactElement\u003cany, any\u003e { }\r\n+        interface Element extends React.ReactElement\u003cany, any\u003e {\r\n+            [k: string]: any\r\n+         }\r\n         interface ElementClass extends React.Component\u003cany\u003e {\r\n             render(): React.ReactNode;\r\n         }\r\n@@ -3133,8 +3135,12 @@ declare global {\r\n                 : ReactManagedAttributes\u003cT, P\u003e\r\n             : ReactManagedAttributes\u003cC, P\u003e;\r\n \r\n-        interface IntrinsicAttributes extends React.Attributes { }\r\n-        interface IntrinsicClassAttributes\u003cT\u003e extends React.ClassAttributes\u003cT\u003e { }\r\n+        interface IntrinsicAttributes extends React.Attributes {\r\n+            [k: string]: any\r\n+         }\r\n+        interface IntrinsicClassAttributes\u003cT\u003e extends React.ClassAttributes\u003cT\u003e { \r\n+            [k: string]: any\r\n+        }\r\n \r\n         interface IntrinsicElements {\r\n             // HTML\r\n\r\n```\r\n\r\nnode_modules/@vue/runtime-dom/dist/runtime-dom.d.ts(@vue/runtime-dom@3.2.37)  \r\n\u003e Starting from Vue 3.4, Vue no longer implicitly registers the global JSX namespace. The patch path should be `node_modules/vue/jsx-runtime/index.d.ts`\n\n```diff\r\ndiff --git a/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts b/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts\r\nindex 3366f5a..b9eacc6 100644\r\n--- a/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts\r\n+++ b/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts\r\n@@ -1493,7 +1493,7 @@ type NativeElements = {\r\n \r\n declare global {\r\n   namespace JSX {\r\n-    interface Element extends VNode {}\r\n+    // interface Element extends VNode {}\r\n     interface ElementClass {\r\n       $props: {}\r\n     }\r\n\r\n```\r\n\r\n## Development Setup  \r\nThe directories `dev-project-react` and `dev-project-vue3` in the project are the basic projects of the development environment of `veaury`, and they are also the two initial projects created by `create-react-app` and `@vue/cli` respectively.\r\n\u003e [!NOTE]  \r\n\u003e In the `config/webpack.config.js` of the React project and the `vue.config.js` of the Vue project, you can uncomment the `veaury` in `alias` to develop the source code of `veaury`\r\n\r\n\u003e [!TIP]  \r\n\u003e This project can only be installed using `yarn`.\r\n\u003e **Setup:** Run the command `npm run setup` in the root directory of the main project to install the main project and two subprojects\r\n\r\n\u003e [!TIP]  \r\n\u003e **Develop:** Run the commands `npm run dev:vue` and `npm run dev:react` in the root directory of the main project for development  \r\n\r\n\u003e [!IMPORTANT]  \r\n\u003e Introduction to other scripts in `package.json`  \r\n\u003e `npm run build`: Build veaury to production.  \r\n\u003e `build:vue`: Build the project `dev-project-vue3` to production.  \r\n\u003e `build:react`:  the project `dev-project-react` to production.  \r\n\u003e `remotedev:vue`: Start the project `dev-project-vue3` to development (`veaury` is pointed to the dependency in node_modules.)  \r\n\u003e `remotedev:react`: Start the project `dev-project-react` to development (`veaury` is pointed to the dependency in node_modules.)  \r\n\u003e `remotebuild:vue`: Build the project `dev-project-vue3` to production (`veaury` is pointed to the dependency in node_modules.)  \r\n\u003e `remotebuild:react`: Build the project `dev-project-react` to production (`veaury` is pointed to the dependency in node_modules.)  \r\n\u003e `test`: Carry out testing  \r\n\r\n\r\n## Project Structure  \r\n- `babel`: contains babel presets for projects built via webpack to solve the problem of compiling both vue and react type jsx.  \r\n  - See [How to configure React in the Vue project from '@vue/cli' ](https://github.com/devilwjp/veaury/tree/master/dev-project-vue3)  for more details on the babel preset.\r\n- `dist`: contains built files for distribution. Note this directory is only updated when a release happens; they do not reflect the latest changes in development branches.  \r\n- `types`: contains TypeScript type definitions.\r\n- `vite`: contains plugins for projects built with vite to solve the problem of compiling vue and react at the same time.   \r\n- `webpack`: contains webpack plugins for projects built via webpack to solve the problem of compiling vue and react at the same time.  \r\n  - See [How to configure Vue in the React project from 'create-react-app' ](https://github.com/devilwjp/veaury/tree/master/dev-project-react)  for more details on the webpack plugin.  \r\n- `src`: contains the source code.  \r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgloriasoft%2Fveaury","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgloriasoft%2Fveaury","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgloriasoft%2Fveaury/lists"}