### Vue Example with Veaury React Integration

Source: https://github.com/gloriasoft/veaury/blob/master/pure_mode.md

A Vue 3 component demonstrating the usage of `applyPureReactInVue` and `applyReactInVue` from Veaury. It shows how to wrap a React component (AA) and render it with different slot contents, illustrating the impact of pure vs. normal mode rendering on VNode conversion.

```vue
<template>
  <h3>Pure mode</h3>
  <AAWithPure>
    <div class="flex-sub">A</div>
    <div class="flex-sub">B</div>
    <div class="flex-sub">C</div>
  </AAWithPure>
  <br/>
  <h3>Normal mode</h3>
  <AAWithNormal>
    <div class="flex-sub">A</div>
    <div class="flex-sub">B</div>
    <div class="flex-sub">C</div>
  </AAWithNormal>
</template>

<script setup>
import { applyPureReactInVue, applyReactInVue } from 'veaury'
// React component AA
import AAReact from './react_app/AA'

// Children and slots in the component will be rendered completely as pure ReactNode
const AAWithPure = applyPureReactInVue(AAReact)
const AAWithNormal = applyReactInVue(AAReact)

</script>

<style scoped>
.slot {
  background: aquamarine;
  padding: 10px;
  margin: 10px;
}
.flex-sub {
  width: 50px;
  height: 50px;
  background: dodgerblue;
  line-height: 50px;
  margin: 5px;
}
</style>
```

--------------------------------

### Vue Component Accessing React Router Context

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

A Vue component example (`Basic.vue`) that utilizes the `useReactRouterForVue` hook created by `createCrossingProviderForVueInReact`. The `setup` function in this component calls the hook to get `location` and `navigate` from the React Router context, enabling it to display route information and modify the query parameters. Dependencies: 'veaury'.

```vue
<template>
  <div class="vue-component">
    <h3>This is the Vue Component.</h3>
    the path info from 'react-router': <span style="font-weight: bold">{{pathname + search}}</span><br/><br/>
    <button @click="changeQuery">change query</button>
  </div>
</template>
<script>
import { useReactRouterForVue } from './reactRouterCrossingProvider'
import React from 'react'

export default {
  setup() {
    const { location, navigate } = useReactRouterForVue()
    function changeQuery() {
      navigate(`?a=${Math.random()}`, {replace: true})
    }
    return {
      pathname: location.pathname,
      search: location.search,
      changeQuery
    }
  }
}
</script>
```

--------------------------------

### Inject Vue Hooks into React Components (Setup Mode)

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

This React component demonstrates how to inject Vue hooks like `vue-router` and `vuex` into a React component when used within a Vue application. The `VueInjectionHookInSetupMode` function is called within the Vue wrapper's setup function, and its return object is passed as props to the React component. Dependencies include 'vue', 'vuex', 'vue-router', and 'veaury'.

```jsx
import React from 'react'
import {toRef} from 'vue'
import {useStore} from 'vuex'
import {useRoute, useRouter} from 'vue-router'
import {applyPureReactInVue} from 'veaury'

// setup函数模式
function VueInjectionHookInSetupMode(vueProps) {
  // 可以在这个函数中使用 Vue hooks
  // 这个函数将在 Vue 包装器组件的 'setup' 函数中调用
  const store = useStore()
  const route = useRoute()
  const router = useRouter()

  // 返回的对象将作为 props 传递给 React 组件
  return {
    fullPath: toRef(route, 'fullPath'),
    count: toRef(store.state, 'count'),
    changeQuery: () => router.replace({
      query: {
        a: Math.random()
      }
    }),
    incrementCount: () => store.dispatch('increment')
  }
}

function ReactComponent (props) {
  return (<div>
    This is the React Component
    <span>
      the path info from 'vue-router': <span style={{fontWeight: 'bold'}}>{props.fullPath}</span><br/>
      the count from 'vuex': <span style={{fontWeight: 'bold'}}>{props.count}</span>
    </span><br/>
    <button onClick={props.changeQuery}>change query</button> <button onClick={props.incrementCount}>increment count</button>
  </div>)
}

export default applyPureReactInVue(ReactComponent, {
  useInjectPropsFromWrapper: VueInjectionHookInSetupMode
})
```

--------------------------------

### Accessing Refs: React to Vue

Source: https://context7.com/gloriasoft/veaury/llms.txt

Demonstrates how to get a reference to a Vue component instance from a React component using Veaury's `applyVueInReact`. This enables imperative interactions with Vue components from React.

```jsx
// Get Vue ref in React
import { applyVueInReact } from 'veaury'
import { createRef, useEffect } from 'react'
import VueComponent from './Component.vue'

const VueComp = applyVueInReact(VueComponent)

export default function ReactApp() {
  const vueRef = createRef(null)

  useEffect(() => {
    // Access Vue instance via __veauryVueRef__
    console.log(vueRef.current.__veauryVueRef__)

    // Call Vue component methods
    vueRef.current.__veauryVueRef__.someVueMethod()
  }, [])

  return <VueComp ref={vueRef} />
}
```

--------------------------------

### Basic React in Vue Usage with Veaury

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

Illustrates the core method for rendering a React component within a Vue.js application using Veaury. This snippet covers the essential setup for integrating React components into a Vue environment.

```javascript
import { Veaury } from 'veaury'
import React from 'react'

const ReactComponent = (props) => {
  return (
    <div>
      <h2>Hello from React!</h2>
      <p>Props from Vue: {JSON.stringify(props)}</p>
    </div>
  )
}

export default {
  components: {
    ReactComponent: Veaury(ReactComponent)
  },
  template: '<ReactComponent :message="'Hello from Vue!'" />'
}
```

--------------------------------

### Customize File Support for Vue JSX in Webpack

Source: https://github.com/gloriasoft/veaury/blob/master/dev-project-react/README.md

This configuration demonstrates how to customize the file types and directories that support Vue-type JSX using the `VeauryVuePlugin`. It includes examples for including all `.vue` and `.vue.js` files, and specific directories like 'abc', while excluding `node_modules`.

```javascript
// webpack.config.js
// ...
const VeauryVuePlugin = require('veaury/webpack/VeauryVuePlugin')
module.exports = {
  // ...
  plugins: [
    new VeauryVuePlugin({
      babelLoader: {
        // Set all vue files and js files in the 'abc' directory to support vue type jsx
        include(filename) {
          // ignore node_modules
          if (filename.match(/[/\]node_modules[\/$]+/)) return
          // pass all vue file
          if (filename.match(/.(vue|vue.js)$/i)){
            return filename
          }
          // pass abc path
          if (filename.match(/[/\]abc[\/$]+/)) return filename
        },
        // exclude() {}
      }
    }),
    // ...
  ]
  // ...
}
```

--------------------------------

### Get Vue Component Instance in React (React)

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

This example shows how to retrieve the instance of a Vue component from within a React component using Veaury. The `applyVueInReact` function is used to integrate the Vue component. A React ref is created and attached to the Vue component. The actual Vue instance is then accessible through the `__veauryVueRef__` property of the ref's current value.

```jsx
import {applyVueInReact} from 'veaury'
import BasicVue from './Basic.vue'
import React, { createRef, useEffect } from "react"

const Basic = applyVueInReact(BasicVue)
export default function () {
  const basicInstance = createRef(null)
  useEffect(() => {
    // Get the real vue instance through `__veauryVueRef__`
    console.log(basicInstance.current.__veauryVueRef__)
  }, [])
  return <Basic ref={basicInstance}/>
}

```

--------------------------------

### React Component AA Definition

Source: https://github.com/gloriasoft/veaury/blob/master/pure_mode.md

Defines a simple React functional component named 'AA' that accepts children and applies basic inline styling for layout. This component is intended to be integrated into a Vue application using Veaury.

```jsx
import React from 'react'

const containerStyle = {
  background: '#91e7fc',
  width: 500,
  margin: 'auto',
  padding: 10,
  display: 'flex',
  justifyContent: 'space-around'
}
export default function AA(props) {
  return <div style={containerStyle}>
    {props.children}
  </div>
}
```

--------------------------------

### Vue v-model Usage in React with applyVueInReact (JSX)

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

This example demonstrates how to use `v-model` with Vue components wrapped in React using `applyVueInReact`. It shows different ways to structure the `v-model` property, including single and multiple model bindings, with or without an argument key and modifiers.

```typescript
// types
type modelValue = any
type modelSetter = (newValue) => void
type argumentKey = string
type argumentModifiers = string[]
```

```jsx
import {applyVueInReact} from 'veaury'
import BasicVue from './Basic.vue'
import Basic1Vue from './Basic1.vue'
import {useState} from 'react'

const Basic = applyVueInReact(BasicVue)
const Basic1 = applyVueInReact(Basic1Vue)
export default function () {
  const [foo, setFoo] = useState(Math.random())
  const [bar, setBar] = useState(Math.random())
  const [zoo, setZoo] = useState(Math.random())

  return <div>
    <Basic v-model={[foo, setFoo]} v-model-bar={[bar, setBar]} />
    {/*<Basic1 v-model={[zoo, setZoo, 'zoo']}/>
    <Basic1 v-model={[zoo, setZoo, 'zoo', ['number']]}/>
    <Basic1 v-model-zoo={[zoo, setZoo, ['number']]}/>
    <Basic1 v-models={{ // The key value of 'modelValue' is equivalent to 'v-model'
      modelValue: [zoo, setZoo],
      //...otherModels
    }} />*/}
  </div>
}
```

--------------------------------

### Vue in React: Event Handling with Veaury

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

Shows how to manage event communication between Vue components rendered in React using Veaury. This example covers emitting events from Vue and listening to them in React.

```javascript
import { Veaury } from 'veaury'
import React, { useState } from 'react'

const App = () => {
  const [message, setMessage] = useState('')

  const vueComponent = Veaury({
    el: '#vue-app',
    render: (props) => {
      return (
        <div id="vue-app">
          <p>Vue Component</p>
          <button onClick={() => props.onMessage('Hello from Vue Event!')}>Send Event</button>
        </div>
      )
    },
    methods: {
      onMessage: (msg) => {
        setMessage(msg)
      }
    }
  })

  return (
    <div>
      <h1>React App</h1>
      {vueComponent}
      <p>Message from Vue: {message}</p>
    </div>
  )
}

export default App
```

--------------------------------

### React in Vue: Event Handling with Veaury

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

Demonstrates how to handle events emitted from React components within a Vue application using Veaury. This example focuses on capturing events from React in the Vue parent component.

```javascript
import { Veaury } from 'veaury'
import React from 'react'

const ReactComponent = (props) => {
  return (
    <div>
      <h2>React Component</h2>
      <button onClick={() => props.onClickEvent('Event from React!')}>Send Event</button>
    </div>
  )
}

export default {
  components: {
    ReactComponent: Veaury(ReactComponent)
  },
  methods: {
    handleReactEvent(eventData) {
      console.log('Received event from React:', eventData)
    }
  },
  template: '<ReactComponent @onClickEvent="handleReactEvent" />'
}
```

--------------------------------

### Get Vue Component Instance in React

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

Illustrates how to obtain the actual Vue component instance when using a Vue component within a React application via `applyVueInReact`. The Vue instance is accessible through the `__veauryVueRef__` property on the React ref assigned to the Vue component.

```jsx
import {applyVueInReact} from 'veaury'
import BasicVue from './Basic.vue'
import React, { createRef, useEffect } from "react"

const Basic = applyVueInReact(BasicVue)
export default function () {
  const basicInstance = createRef(null)
  useEffect(() => {
    // Get the real vue instance through `__veauryVueRef__`
    console.log(basicInstance.current.__veauryVueRef__)
  }, [])
  return <Basic ref={basicInstance}/>
}
```

--------------------------------

### Converting VNode to ReactNode with getReactNode in Vue

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

Demonstrates how to use Veaury's `getReactNode` utility within a Vue component to convert Vue VNodes back into React nodes. This is essential when passing data structures containing React nodes as props to React components, especially when those nodes originate from Vue's JSX compilation or other VNode creation methods. The example shows converting JSX elements into React nodes for properties and render functions passed to a React component wrapped by `applyPureReactInVue`.

```vue
<template>
  <AA :prop1="propForReact"/>
</template>
<script setup>
import { getReactNode, applyPureReactInVue } from 'veaury'
import AAReact from './react_app/AA.jsx'
const AA = applyPureReactInVue(AAReact)
const propForReact = {
  foo: 'Mike',
  bar: [{
    body: getReactNode(<div>John</div>)
  }],
  render: (name) => getReactNode(<div>{name}</div>)
}
</script>

```

--------------------------------

### Converting ReactNode to VNode with getVNode in React

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

Explains how to use Veaury's `getVNode` utility within a React component to convert React nodes into Vue VNodes. This is particularly useful when passing VNode-type props from React to Vue components that expect them, ensuring proper rendering. The example shows converting a React element into a VNode and passing it as a prop to a Vue component wrapped by `applyVueInReact`.

```jsx
import { applyVueInReact, getVNode } from 'veaury'
import AAVue from './AA.vue'

const AA = applyVueInReact(AAVue)
const VNodeBar = getVNode(
  <div style={{background: '#105a31', marginTop: '5px', color: 'white'}}>
    <div>rendered with a property</div>
    <div>This is Bar's VNode</div>
  </div>
)
export default function ReactComponent () {
  // `VNodeBar` is a property of type VNode, so use getVNode to convert reactNode to VNode.
  return <AA VNodeBar={VNodeBar}/>
}
```

--------------------------------

### React App Integrating Vue Component with Cross-Framework Provider

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

This React component demonstrates how to integrate a Vue component (`BasicVue`) into a React application using `applyVueInReact` from 'veaury'. It also sets up the `ReactRouterProviderForVue` (created previously) as a parent provider to enable the Vue component to access React Router context. Dependencies: 'veaury'.

```jsx
import {applyVueInReact} from 'veaury'
// Basic is a Vue component
import BasicVue from './Basic.vue'
import { ReactRouterProviderForVue } from './reactRouterCrossingProvider'

const Basic = applyVueInReact(BasicVue)
export default function () {

    return <ReactRouterProviderForVue>
            <Basic/>
        </ReactRouterProviderForVue>
}
```

--------------------------------

### Create React Provider for Vue Features in React Apps

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

This JavaScript snippet introduces `createReactMissVue`, a factory function for creating a React provider component and a React hook. This enables the direct use of Vue features like `vue-router` and `pinia` within React applications. It demonstrates setting up Vue Router and Pinia stores and accessing them in a React component.

```javascript
import { defineStore, createPinia } from 'pinia'
import { createRouter, createWebHashHistory, useRouter, useRoute } from 'vue-router'
import { createReactMissVue, applyReactInVue, VueContainer } from 'veaury'

// create vue-router instance
const router = createRouter({
  // Using vue-router inside route 'ReactMissVue'
  history: createWebHashHistory('/#/ReactMissVue'),
  routes: [
    {
      name: '',
      path: '/aaa',
      component: applyReactInVue(() => <div className="react-component">
        react use vue-router<br/>
        path: /aaa
      </div>)
    },
    {
      name: 'empty',
      path: '/:default(.*)',
      component: applyReactInVue(() => <div className="react-component">
        react use vue-router<br/>
        empty
      </div>)
    },
  ],
})

// create a pinia store
const useFooStore = defineStore({
  id: 'foo',
  state() {
    return {
      name: 'Eduardo'
    }
  },
  actions: {
    changeName(name) {
      this.$patch({
        name
      })
    }
  }
})

// create a ReactMissVue instance
let [useReactMissVue, ReactMissVue, ReactMissVueContext] = createReactMissVue({
  useVueInjection() {
    // This object can be obtained by using useReactMissVue in the react component
    return {
      fooStore: useFooStore(),
      vueRouter: useRouter(),
      vueRoute: useRoute()
    }
  },
  // beforeVueAppMount can only be used in the outermost ReactMissVue
  // Because veaury will only create a vue application in the outermost layer
  beforeVueAppMount(app) {
    // register pinia
    app.use(createPinia())
    // register vue-router
    app.use(router)
  }
})

function Demo() {
  const { fooStore } = useReactMissVue()
  return <div>
    <div>
      Foo's name: {fooStore?.name}
    </div>
    {/* Use the global component router-view */}
    <VueContainer component="RouterView"/>
  </div>
}

export default function () {
  return <ReactMissVue>
    <Demo/>
  </ReactMissVue>
}
```

--------------------------------

### Inject Vue Router and Vuex Hooks into React Component with Veaury

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

This example demonstrates using a React component within a Vue application. It shows how to inject `vue-router` and `vuex` hooks into the React component using Veaury's `applyPureReactInVue`. Two modes are presented: 'setup' mode, which uses Vue's composition API hooks directly, and 'computed' mode, which uses the Options API syntax. Both modes allow the React component to access and manipulate Vue's routing and state management.

```jsx
import React from 'react'
import {toRef} from 'vue'
import {useStore} from 'vuex'
import {useRoute, useRouter} from 'vue-router'
import {applyPureReactInVue} from 'veaury'

// This React component will be used in the Vue app and needs to use the vue-router and vuex hooks

// setup mode
function VueInjectionHookInSetupMode(vueProps) {
  // Vue hooks can be used in this function
  // This function will be called in the 'setup' hook of the Vue wrapper component
  const store = useStore()
  const route = useRoute()
  const router = useRouter()

  // The returned object will be passed to the React component as props
  return {
    // you need to manually convert to proxy with 'setup' mode
    // otherwise it will not be responsive
    fullPath: toRef(route, 'fullPath'),
    count: toRef(store.state, 'count'),
    changeQuery: () => router.replace({
      query: {
        a: Math.random()
      }
    }),
    incrementCount: () => store.dispatch('increment')
  }
}

// computed mode
function VueInjectionHookInComputedMode(vueProps) {
  // The context of the function is binding with the proxy from the 'getCurrentInstance' hook
  // Returning a function represents the computed of the options api
  // All logic code should be written in this computed function.
  // The lifecycle cannot be used in this function. If you want to use the lifecycle, you can only use the 'setup' mode
  return function computedFunction() {
    return {
      fullPath: this.$route.fullPath,
      count: this.$store.state.count,
      changeQuery: () => this.$router.replace({
        query: {
          a: Math.random()
        }
      }),
      incrementCount: () => this.$store.dispatch('increment')
    }
  }
}

function ReactComponent (props) {
  return (<div>
    This is the React Component
    <span>
      the path info from 'vue-router': <span style={{fontWeight: 'bold'}}>{props.fullPath}</span><br/>
      the count from 'vuex': <span style={{fontWeight: 'bold'}}>{props.count}</span>
    </span><br/>
    <button onClick={props.changeQuery}>change query</button> <button onClick={props.incrementCount}>increment count</button>
  </div>)
}

// Vue's injection function has two modes: 'setup' and 'computed'.
// Refer to the case of the above two injection function types.
// Also try replacing the option injectPropsFromWrapper with 'VueInjectionHookInComputedMode'
export default applyPureReactInVue(ReactComponent, {
  useInjectPropsFromWrapper: VueInjectionHookInSetupMode
})
```

--------------------------------

### Create React Provider for Vue Router and Vuex in React/Vue

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

This snippet demonstrates how to create a provider in JavaScript that enables React hooks to access Vuex and Vue Router instances. It utilizes `createCrossingProviderForPureReactInVue` from 'veaury' to bridge these functionalities. The provider exports a hook `useVueHooksInReact` for React components and `VueProviderForReact` to wrap components.

```javascript
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {createCrossingProviderForPureReactInVue} from 'veaury'

const [useVueHooksInReact, VueProviderForReact] = createCrossingProviderForPureReactInVue(function() {
  return {
    vuex: useStore(),
    vueRoute: useRoute(),
    vueRouter: useRouter()
  }
})

export {
  useVueHooksInReact,
  VueProviderForReact
}
```

--------------------------------

### createCrossingProviderForVueInReact with Veaury

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

Demonstrates how to create a cross-framework context provider using `createCrossingProviderForVueInReact` for sharing state from React to Vue components. This enables seamless context propagation across the framework boundary.

```javascript
import { Veaury, createCrossingProviderForVueInReact } from 'veaury'
import React, { useState } from 'react'

const MyVueComponent = () => {
  const { message } = useCrossingContext('react')
  return <div>Vue Component received: {message}</div>
}

const App = () => {
  const [reactMessage, setReactMessage] = useState('Hello from React Provider!')
  const VueCrossingProvider = createCrossingProviderForVueInReact({
    reactToVue: {
      message: reactMessage
    }
  })

  return (
    <div>
      <h1>React App</h1>
      <VueCrossingProvider>
        <MyVueComponent />
      </VueCrossingProvider>
      <input value={reactMessage} onChange={(e) => setReactMessage(e.target.value)} />
    </div>
  )
}

export default App
```

--------------------------------

### Configure Vite for React Project with Vue Components

Source: https://context7.com/gloriasoft/veaury/llms.txt

This Vite configuration enables a React project to include Vue components. It sets 'react' as the main framework and utilizes `veauryVitePlugins`. The configuration ensures that only `.vue` files and directories named 'vue_app' are processed with Vue JSX, while all other JSX is handled by React JSX. Options for the respective plugins are also configurable.

```javascript
// vite.config.js - React project with Vue components
import { defineConfig } from 'vite'
import veauryVitePlugins from 'veaury/vite/index.js'

export default defineConfig({
  plugins: [
    veauryVitePlugins({
      type: 'react',  // Main framework
      // Only .vue files and 'vue_app' directories use Vue JSX
      // All other jsx uses React JSX

      vueOptions: {},
      reactOptions: {},
      vueJsxOptions: {}
    })
  ]
})
```

--------------------------------

### Vue Component Using React Provider for React Components

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

This Vue component snippet shows how to integrate React components within a Vue application using `VueProviderForReact`. It wraps a React component (`ReactBasic`) with `applyPureReactInVue` and nests it within `VueProviderForReact`, allowing the React component to access the provided Vue context.

```vue
<template>
  <VueProviderForReact>
    <Basic/>
  </VueProviderForReact>
</template>

<script>
import { applyPureReactInVue } from 'veaury'
// This is a React Component
import ReactBasic from "./react_app/Basic"
import {VueProviderForReact} from "./vueRouterAndVuexCrossingProvider";

export default {
  components: {
    VueProviderForReact,
    Basic: applyPureReactInVue(ReactBasic),
  }
}
</script>
```

--------------------------------

### createCrossingProviderForReactInVue with Veaury

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

Illustrates the usage of `createCrossingProviderForReactInVue` to establish a context provider that shares state from Vue to React components. This facilitates cross-framework state management initiated from the Vue side.

```javascript
import { Veaury, createCrossingProviderForReactInVue } from 'veaury'
import React from 'react'

const MyReactComponent = () => {
  const { message } = useCrossingContext('vue')
  return <div>React Component received: {message}</div>
}

export default {
  components: {
    MyReactComponent: Veaury(MyReactComponent)
  },
  data() {
    return {
      vueMessage: 'Hello from Vue Provider!'
    }
  },
  setup() {
    const ReactCrossingProvider = createCrossingProviderForReactInVue({
      vueToReact: {
        message: this.vueMessage
      }
    })
    return { ReactCrossingProvider }
  },
  template: '<div><h2>Vue App</h2><ReactCrossingProvider><MyReactComponent /></ReactCrossingProvider></div>'
}
```

--------------------------------

### Getting Ref of Vue Component in React with Veaury

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

Demonstrates how to obtain a reference (ref) to a Vue component rendered within React using Veaury. This allows direct interaction with the Vue component instance from the React parent.

```javascript
import { Veaury } from 'veaury'
import React, { useRef, useEffect } from 'react'

const App = () => {
  const vueRef = useRef()

  const vueComponent = Veaury({
    el: '#vue-app',
    data() {
      return { message: 'Hello Vue!' }
    },
    methods: {
      showMessage() {
        alert(this.message)
      }
    },
    render() {
      return <div ref={vueRef}>Vue Component</div>
    }
  })

  useEffect(() => {
    if (vueRef.current) {
      console.log('Vue component instance:', vueRef.current)
      // You can call methods like: vueRef.current.showMessage()
    }
  }, [])

  return (
    <div>
      <h1>React App</h1>
      {vueComponent}
    </div>
  )
}

export default App
```

--------------------------------

### Configure Babel for Vue CLI with React Components

Source: https://context7.com/gloriasoft/veaury/llms.txt

This Babel configuration enables a Vue CLI project to support React components by integrating Veaury's Babel preset. The `babel.config.js` file points to a custom React preset (`babel/ReactPreset.js`) which extends the default Vue CLI Babel preset. It then defines overrides to specifically apply `babel-preset-react-app` to files within directories named 'react_app', ensuring correct JSX parsing for React components.

```javascript
// babel.config.js
module.exports = {
  presets: [
    require('./babel/ReactPreset')  // Veaury's Babel preset
  ]
}
```

```javascript
// babel/ReactPreset.js (from veaury)
module.exports = function(context, options = {}) {
  return {
    presets: [
      ['@vue/cli-plugin-babel/preset', options]
    ],
    overrides: [
      {
        test(filename) {
          // Files in react_app directories use React JSX
          if (filename.match(/[/\]react_app[\/$]+/)) {
            return filename
          }
        },
        presets: ['babel-preset-react-app']
      }
    ]
  }
}
```

--------------------------------

### Inject React Router Hooks into Vue Component with Veaury

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

This example shows how to use a Vue component within a React application. It demonstrates injecting `react-router-dom` hooks (like `useLocation` and `useNavigate`) into the Vue component via Veaury's `applyVueInReact` and `useInjectPropsFromWrapper`. The Vue component then uses these injected properties to display route information and navigate.

```vue
<template>
  <div class="vue-component">
    <h3>This is the Vue Component.</h3>
    the path info from 'react-router': <span style="font-weight: bold">{{fullPath}}</span><br/><br/>
    <button @click="changeQuery">change query</button>
  </div>
</template>
<script>
import { computed } from 'vue'

export default {
  props: ['reactRouter'],
  // do not destructure props
  setup(props) {
    function changeQuery() {
      props.reactRouter?.navigate(`?a=${Math.random()}`, {replace: true})
    }
    const fullPath = computed(() => {
      const { location } = props.reactRouter || {}
      return location?.pathname + location?.search
    })
    return {
      fullPath,
      changeQuery
    }
  }
}
</script>
```

```javascript
import { applyVueInReact } from 'veaury'
import { useLocation, useNavigate } from 'react-router-dom'
import AboveVueComponent from './AboveVueComponent'

export default applyVueInReact(AboveVueComponent, {
  useInjectPropsFromWrapper(reactProps) {
    // React hooks can be used in this function
    // Use the hooks of react-router-dom
    const location = useLocation()
    const navigate = useNavigate()

    // The returned object will be passed to the Vue component as props
    return {
      reactRouter: {
        navigate,
        location
      }
    }
  }
})
```

--------------------------------

### Use Vue Plugins in React with createReactMissVue

Source: https://context7.com/gloriasoft/veaury/llms.txt

The `createReactMissVue` function allows you to use Vue's router, Pinia store, and other plugins directly within a React application. It sets up a bridge where React components can access Vue's context and plugins. This enables a mixed-framework environment where Vue's ecosystem can be leveraged in a React project.

```jsx
import { createReactMissVue, applyReactInVue, VueContainer } from 'veaury'
import { createRouter, createWebHashHistory, useRouter, useRoute } from 'vue-router'
import { defineStore, createPinia } from 'pinia'

// Create Vue Router
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/home',
      component: applyReactInVue(() => <div>React Home Route</div>)
    },
    {
      path: '/about',
      component: applyReactInVue(() => <div>React About Route</div>)
    }
  ]
})

// Create Pinia store
const useUserStore = defineStore({
  id: 'user',
  state: () => ({ name: 'John', age: 25 }),
  actions: {
    updateName(name) {
      this.name = name
    }
  }
})

// Create ReactMissVue instance
const [useReactMissVue, ReactMissVue] = createReactMissVue({
  useVueInjection() {
    return {
      userStore: useUserStore(),
      vueRouter: useRouter(),
      vueRoute: useRoute()
    }
  },
  beforeVueAppMount(app) {
    app.use(createPinia())
    app.use(router)
  }
})

function Dashboard() {
  const { userStore, vueRoute } = useReactMissVue()

  function changeName() {
    userStore?.updateName(`User ${Math.random()}`)
  }

  return (
    <div>
      <h2>React using Vue plugins!</h2>
      <div>User: {userStore?.name} (age: {userStore?.age})</div>
      <div>Current route: {vueRoute?.path}</div>
      <button onClick={changeName}>Change Name</button>
      {/* Render Vue Router's RouterView */}
      <VueContainer component="RouterView" />
    </div>
  )
}

export default function App() {
  return (
    <ReactMissVue>
      <Dashboard />
    </ReactMissVue>
  )
}

```

--------------------------------

### Get React Component Instance in Vue

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

Explains how to access the underlying React component instance from within a Vue component. When using `applyPureReactInVue` to wrap a React component in Vue, the React instance can be accessed via the `__veauryReactRef__` property on the Vue ref. Direct child elements or components within a pure mode React component can also have their refs accessed directly.

```vue
<template>
  <Basic ref="Basic">
    <div ref="div">hello</div>
    <AA ref="AA"/>
  </Basic>
</template>
<script>
import { applyPureReactInVue } from 'veaury'
import BasicReact from './Basic.jsx'
import AAReact from './AA.jsx'
export default {
  components: {
    Basic: applyPureReactInVue(BasicReact),
    AA: applyPureReactInVue(AAReact)
  },
  mounted() {
    // Get the real react instance through `__veauryReactRef__`
    console.log(this.$refs.Basic.__veauryReactRef__)
    // If the converted react component or dom element is placed as a child node in a pure mode react component, 
    // the ref can be obtained directly
    console.log(this.$refs.div)
    console.log(this.$refs.AA)
  }
}
</script>
```

--------------------------------

### Convert React Component to Vue with Veaury

Source: https://context7.com/gloriasoft/veaury/llms.txt

Illustrates how to use `applyReactInVue` to integrate React components into a Vue 3 application. This covers basic prop binding, event handling, using React render props as Vue slots, and managing v-model.

```vue
<template>
  <div>
    <!-- Basic usage with props and children -->
    <BasicComponent :foo="foo">
      <div>Child content</div>
    </BasicComponent>

    <!-- With events (trigger with props.onClick() in React) -->
    <ReactButton @click="handleClick" />

    <!-- With render props (React) as named slots (Vue) -->
    <ReactList>
      <template v-slot:header>
        <div>Header Content</div>
      </template>
      <template v-slot:item="{ data }">
        <div>{{ data }}</div>
      </template>
      <!-- React Node slot (doesn't call as function) -->
      <template v-slot:node:footer>
        <div>Footer Content</div>
      </template>
    </ReactList>

    <!-- Two-way binding with v-model -->
    <ReactInput v-model="inputValue" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { applyReactInVue } from 'veaury'
import BasicReact from './react_app/Basic.jsx'
import ReactButton from './react_app/Button.jsx'
import ReactList from './react_app/List.jsx'
import ReactInput from './react_app/Input.jsx'

const BasicComponent = applyReactInVue(BasicReact)
const ReactButton = applyReactInVue(ReactButton)
const ReactList = applyReactInVue(ReactList)
const ReactInput = applyReactInVue(ReactInput)

const foo = ref('Hello World')
const inputValue = ref('')

function handleClick() {
  console.log('React component clicked!')
}
</script>
```

--------------------------------

### Vue in React: Context API Usage with Veaury

Source: https://github.com/gloriasoft/veaury/blob/master/README.md

Demonstrates how to share context between React and Vue components using Veaury's context provider and useContext hooks. This allows for global state management across frameworks.

```javascript
import { Veaury } from 'veaury'
import React, { useContext, createContext } from 'react'

const MyContext = createContext()

const VueComponent = () => {
  const contextValue = useContext(MyContext)
  return (
    <div>
      <p>Vue Component</p>
      <p>Context from React: {contextValue}</p>
    </div>
  )
}

const App = () => {
  const vueApp = Veaury(VueComponent)
  return (
    <MyContext.Provider value="Hello from React Context!">
      <h1>React App</h1>
      {vueApp}
    </MyContext.Provider>
  )
}

export default App
```

--------------------------------

### Rendering ReactNode in Vue with RenderReactNode Component

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

Explains how to render React nodes within a Vue component using Veaury's `RenderReactNode` component. This is necessary when dealing with render props or slot props in React components that expect ReactNode. The `RenderReactNode` component acts as a bridge, correctly rendering the React content within the Vue template, as shown in the example using a Vue slot.

```vue
<template>
  <AA>
    <template v-slot:prop2="itemReactNode">
      <RenderReactNode :node="itemReactNode"/>
    </template>
  </AA>
</template>
<script setup>
import { RenderReactNode, applyPureReactInVue } from 'veaury'
import AAReact from './react_app/AA.jsx'
const AA = applyPureReactInVue(AAReact)
</script>

```

--------------------------------

### Create Vue Context Provider for React in Vue

Source: https://context7.com/gloriasoft/veaury/llms.txt

This snippet demonstrates how to create a provider in Vue that allows React components to access Vue's context, including Vuex, Vue Router, and Vue Route hooks. It utilizes `createCrossingProviderForPureReactInVue` to establish the connection and provides a `VueProvider` for wrapping the application and a hook `useVueHooks` for React components to consume the shared context. Dependencies include 'veaury', 'vuex', and 'vue-router'.

```javascript
// vueHooksProvider.js
import { createCrossingProviderForPureReactInVue } from 'veaury'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'

// Returns [hook for React, Provider for Vue, Context]
export const [useVueHooks, VueProvider] = createCrossingProviderForPureReactInVue(
  function() {
    return {
      vuex: useStore(),
      router: useRouter(),
      route: useRoute()
    }
  }
)
```

```jsx
// ReactComponent.jsx
import React from 'react'
import { useVueHooks } from './vueHooksProvider'

export default function ReactComponent() {
  // React component can use Vue hooks!
  const { vuex, router, route } = useVueHooks()

  function incrementCount() {
    vuex.dispatch('increment')
  }

  function changeRoute() {
    router.push({ query: { id: Math.random() } })
  }

  return (
    <div>
      <div>Current path: {route.fullPath}</div>
      <div>Vuex count: {vuex.state.count}</div>
      <button onClick={incrementCount}>Increment</button>
      <button onClick={changeRoute}>Change Route</button>
    </div>
  )
}
```

```vue
<!-- VueApp.vue -->
<template>
  <VueProvider>
    <!-- All React components inside can access Vue context -->
    <ReactComponent />
  </VueProvider>
</template>

<script setup>
import { applyPureReactInVue } from 'veaury'
import { VueProvider } from './vueHooksProvider'
import ReactComponent from './react_app/Component.jsx'

const ReactComponent = applyPureReactInVue(ReactComponent)
</script>
```

--------------------------------

### Configure Vite for Vue Project with React Components

Source: https://context7.com/gloriasoft/veaury/llms.txt

This Vite configuration allows a Vue project to incorporate React components. It specifies 'vue' as the main framework and uses `veauryVitePlugins`. JSX parsing is configured to prioritize React JSX within 'react_app' directories, while other JSX is treated as Vue JSX. Options for underlying Vite plugins can also be passed.

```javascript
// vite.config.js - Vue project with React components
import { defineConfig } from 'vite'
import veauryVitePlugins from 'veaury/vite/index.js'

export default defineConfig({
  plugins: [
    veauryVitePlugins({
      type: 'vue',  // Main framework
      // Only jsx in 'react_app' directories uses React JSX
      // All other jsx uses Vue JSX

      // Pass options to underlying plugins
      vueOptions: { /* @vitejs/plugin-vue options */ },
      reactOptions: { /* @vitejs/plugin-react options */ },
      vueJsxOptions: { /* @vitejs/plugin-vue-jsx options */ }
    })
  ]
})
```

--------------------------------

### React with Vue: v-model and v-models Usage

Source: https://github.com/gloriasoft/veaury/blob/master/README_zhcn.md

Demonstrates how to use the `v-model` and `v-models` directives within React's JSX when rendering Vue components via `applyVueInReact`. It shows different ways to bind values, including custom argument keys and modifiers.

```typescript
// types
type modelValue = any
type modelSetter = (newValue) => void
type argumentKey = string
type argumentModifiers = string[]

```

```jsx
import {applyVueInReact} from 'veaury'
import BasicVue from './Basic.vue'
import Basic1Vue from './Basic1.vue'
import {useState} from 'react'

const Basic = applyVueInReact(BasicVue)
const Basic1 = applyVueInReact(Basic1Vue)
export default function () {
  const [foo, setFoo] = useState(Math.random())
  const [bar, setBar] = useState(Math.random())
  const [zoo, setZoo] = useState(Math.random())

  return <div>
    <Basic v-model={[foo, setFoo]} v-model-bar={[bar, setBar]} />
    {/*<Basic1 v-model={[zoo, setZoo, 'zoo']}/>*/}
    {/*<Basic1 v-model={[zoo, setZoo, 'zoo', ['number']]}/>*/}
    {/*<Basic1 v-model-zoo={[zoo, setZoo, ['number']]}/>*/}
    <Basic1 v-models={{
      // v-models对象中的key设置为'modelValue'时, 等同于默认的v-model属性
      modelValue: [zoo, setZoo],
      //...可以设置其他的自定义v-model的key
    }} />
  </div>
}

```

--------------------------------

### Global Configuration with setVeauryOptions

Source: https://context7.com/gloriasoft/veaury/llms.txt

Configures Veaury globally, particularly for React 19+ environments. It allows customization of rendering methods, wrapper elements, and slot handling for both React and Vue components.

```javascript
import { createRoot } from 'react-dom/client'
import { setVeauryOptions } from 'veaury'

// Required for react-dom >= 19
setVeauryOptions({
  react: {
    createRoot,
    componentWrap: 'div',
    slotWrap: 'div',
    componentWrapAttrs: {
      __use_react_component_wrap: '',
      style: { all: 'unset' }
    },
    vueNamedSlotsKey: ['node:']
  },
  vue: {
    componentWrapHOC: (VueComponent, nativeProps) => {
      return VueComponent
    },
    componentWrapAttrs: {
      __use_vue_component_wrap: '',
      style: { all: 'unset' }
    }
  }
})
```