Veaury

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

商业合作
What is Veaury?
The greatest feature
Legacy
Latest documentation
Use cases
Installation
Do you want to preconfigure your project in advance?
- Webpack
- Vite
Usage
Typescript JSX types conflict caused by Vue and React at the same time.
Development Setup
Project Structure

商业合作

正在寻求商业合作的可能性(wechat: devilwjp_new / QQ: 9700616)

帮助您的项目做兼容和迁移
帮助您vue或react的组件库，同时存在另一种技术栈版本
帮助您的sdk同时具备支持vue和react的项目
开源的是免费版，可为企业和个人提供定制版需求

What is Veaury?

Veaury (pronounced /ˈvjuːri/, inspired by 'beauty') is a tool library. It 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.

The greatest feature

🌞 Support Vue3
🌈 Support Context - Share the context of all vue and react components.
💗 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.
🪂 Pure mode - The children of the converted component no longer have an extra element container. >>learn more about how the pure mode works

Legacy

The perfect tool library which can use React in Vue2 and Vue2 in React.

Latest documentation

View the latest documentation
中文文档

Use cases

👨‍👩‍👧 Using both Vue and React in one app
🏃 Migrating from React to Vue or from Vue to React
📲 Using third-party Vue and React Components, such as antd, element-ui, vuetify

Installation

# Install with yarn:
$ yarn add veaury
# or with npm:
$ npm i veaury -S

Do you want to preconfigure your project in advance?

In 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.

If 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.

If 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.

Webpack

How to configure React in the Vue project from '@vue/cli'
How to configure Vue in the React project from 'create-react-app'

Vite

If it is a project built by vite, the relevant configuration is as follows.
First install @vitejs/plugin-react, @vitejs/plugin-vue and @vitejs/plugin-vue-jsx.

The main project is Vue:

import { defineConfig } from 'vite'

// if mode cjs, should use `veaury/vite/cjs`
import veauryVitePlugins from 'veaury/vite/esm'


export default defineConfig({
  plugins: [
    // Turn off vue and vuejsx plugins
    // vue(),
    // vueJsx(),
    // When the type of veauryVitePlugins is set to vue, 
    // only jsx in files in the directory named 'react_app' will be parsed with react jsx,
    // and jsx in other files will be parsed with vue jsx
    veauryVitePlugins({
      type: 'vue',
      // Configuration of @vitejs/plugin-vue
      // vueOptions: {...},
      // Configuration of @vitejs/plugin-react
      // reactOptions: {...}, 
      // Configuration of @vitejs/plugin-vue-jsx
      // vueJsxOptions: {...}
    })
  ]
})

The main project is React:

import { defineConfig } from 'vite'

// if mode cjs, should use `veaury/vite/cjs`
import veauryVitePlugins from 'veaury/vite/esm'

export default defineConfig({
  plugins: [
    // Turn off react plugin
    // react(),
    // When the type of veauryVitePlugins is set to react, 
    // only jsx in .vue files and files in a directory named "vue_app" will be parsed using vue jsx, 
    // jsx in other files will be parsed with react jsx
    veauryVitePlugins({
      type: 'react',
      // Configuration of @vitejs/plugin-vue
      // vueOptions: {...},
      // Configuration of @vitejs/plugin-react
      // reactOptions: {...}, 
      // Configuration of @vitejs/plugin-vue-jsx
      // vueJsxOptions: {...}
    })
  ]
})

If you want to customize the compilation scope of vueJsx, you can configure overrides by setting type to custom.
Use vueJsxInclude and vueJsxExclude to configure the file range to be parsed using vue jsx, the others will be parsed using react jsx.

import { defineConfig } from 'vite'

// if mode cjs, should use `veaury/vite/cjs`
import veauryVitePlugins from 'veaury/vite/esm'

export default defineConfig({
  plugins: [
    veauryVitePlugins({
      type: 'custom',
      // 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.
      vueJsxInclude: [/vue&type=script&lang\.[tj]sx$/i, /vue&type=script&setup=true&lang\.[tj]sx$/i, /[/\\]vue_app[\\/][\w\W]+\.[tj]sx$/],
      // vueJsxExclude: [],
      // Configuration of @vitejs/plugin-vue
      // vueOptions: {...},
      // Configuration of @vitejs/plugin-react
      // reactOptions: {...}, 
      // Configuration of @vitejs/plugin-vue-jsx
      // vueJsxOptions: {...}
    })
  ]
})

Usage

Vue in React - Basic usage

import {applyVueInReact, applyPureVueInReact} from 'veaury'
// This is a Vue component
import BasicVueComponent from './Basic.vue'
import {useState} from 'react'
// Use HOC 'applyVueInReact'
const BasicWithNormal = applyVueInReact(BasicVueComponent)
// Use HOC 'applyPureVueInReact'
const BasicWithPure = applyPureVueInReact(BasicVueComponent)
export default function () {
  const [foo] = useState('Hello!')
  return <>
    <BasicWithNormal foo={foo}>
      <div>
        the default slot
      </div>
    </BasicWithNormal>
    <BasicWithPure foo={foo}>
      <div>
        the default slot
      </div>
    </BasicWithPure>
  </>
}

React in Vue - Basic usage

applyPureReactInVue is recommended. Learn about the difference between applyPureReactInVue and applyReactInVue.

<template>
  <BasicPure :foo="foo">
    <div>
      the children
    </div>
  </BasicPure>
</template>
<script>
import {applyReactInVue, applyPureReactInVue} from 'veaury'
// This is a React component
import BasicReactComponent from './react_app/Basic.jsx'
import {ref} from 'vue'

export default {
  components: {
    // Use HOC 'applyReactInVue' or 'applyPureReactInVue'
    Basic: applyReactInVue(BasicReactComponent), 
    BasicPure: applyPureReactInVue(BasicReactComponent)
  },
  setup() {
    return {
      foo: ref('Hello!')
    }
  }
}
</script>

[!NOTE]

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.

Veury provides a method injectSyncUpdateForPureReactInVue to solve this problem

>> The related issue

Let's see an example.

(React component Input.js)

import React from 'react'

export default function Input(props) {
  return <input value={props.value} onChange={props.onChange}/>
}

(Vue page Example.vue)

<template>
  <SimpleInput :value="value" @change="value = $event.target.value"/>
</template>
<script setup>
import { applyPureReactInVue, injectSyncUpdateForPureReactInVue} from 'veaury'
import ReactSimpleInput from "./Input";

// The component only needs to be injected globally once. If injected multiple times, it is equivalent to appending and overwriting function hooks.
injectSyncUpdateForPureReactInVue(ReactSimpleInput, {
  // The name of the hook function that determines the content update of the Input component
  onChange(args) {
    return {
      value: args.target.value
    }
  }
})

const SimpleInput = applyPureReactInVue(ReactSimpleInput)
const value = ref("");
</script>

Vue in React - Usage of events

import {applyVueInReact} from 'veaury'
import BasicVue from './Basic.vue'
import {useState} from 'react'

const Basic = applyVueInReact(BasicVue)
export default function () {
  function onClickForVue() {
    console.log('clicked!')
  }

  return <div>
    {/*Trigger with $emit('click') in Vue component*/}
    <Basic onClick={onClickForVue}/>
  </div>
}

React in Vue - Usage of events


<template>
  <!-- Trigger with 'props.onClick()' in React component -->
  <ReactButton @click="onClickForReact"/>
</template>

<script>
import {ref} from 'vue'
import {applyPureReactInVue} from 'veaury'
// This is a React Component
import ReactButton from "./react_app/Button.jsx"

export default {
  components: {
    ReactButton: applyPureReactInVue(ReactButton)
  },
  setup() {
    function onClickForReact() {
      console.log('clicked!')
    }

    return {
      onClickForReact,
    }
  }
}
</script>

Vue in React - Usage of slots

The usage of 'slots' is similar to the usage of 'v-slots' of Vue's jsx.

import {applyVueInReact} from 'veaury'
import BasicVue from './Basic.vue'

const Basic = applyVueInReact(BasicVue)
export default function () {
  const vSlots = {
    // Render with '<slot name="slot1" />' in Vue Component
    slot1: <div>this is slot1(namedSlot)</div>,
    // Render with '<slot name="slot2" value="xxxxxx"/>' in Vue Component
    slot2: ({value}) => <div>this is slot2(scopedSlot), and receive value: {value}</div>,
    // Render with '<slot/>' in Vue Component
    default: <div>this is children</div>
  }
  return <div>
    {/*just send children*/}
    <Basic>
      {/* Render with '<slot/>' in Vue Component */}
      <div>this is children</div>
    </Basic>
    {/*send v-slots*/}
    <Basic v-slots={vSlots}/>
    {/*another usage*/}
    <Basic>
      {vSlots}
    </Basic>
  </div>
}

React in Vue - Usage of render props and React node

Named slots & scoped slots of Vue = React render props.
Default slots $ children of Vue = React props.children.
A named slot has a name prefixed with node: = React Node

<template>
  <Basic>
    <!--  Render with 'props.slot1()' in React component  -->
    <template v-slot:slot1>
      <div>
        this is slot1 (render props)
      </div>
    </template>
    <!--  Render with 'props.slot2("xxxxx")' in React component  -->
    <template v-slot:slot2="bar">