NOTE: This project is looking for a maintainer!
Check out veaury for a more up-to date library.
Use Vue components in your React app:
import React from 'react'
import MyVueComponent from './MyVueComponent.vue'
export default props =>
<div>
<MyVueComponent message={props.message} handleReset={props.handleReset} />
</div>Or use React components in your Vue app:
<template>
<div>
<my-react-component :message="message" @reset="reset" />
</div>
</template>
<script>
import MyReactComponent from './MyReactComponent'
export default {
/* data, methods, etc */
components: { 'my-react-component': MyReactComponent },
}
</script>- 👨👩👧 Using both Vue and React in one app
- 🏃 Migrating from React to Vue or from Vue to React
Install with yarn:
$ yarn add vuera
# or with npm:
$ npm i -S vueraYou can also try the library out via unpkg:
<script src="https://unpkg.com/vuera"></script>The preferred way to use Vue inside of a React app is to use a Babel plugin.
Add vuera/babel to plugins section of your .babelrc:
{
"presets": "react",
"plugins": ["vuera/babel"]
}Now, just use your Vue components like you would use your React components!
import React from 'react'
import MyVueComponent from './MyVueComponent.vue'
export default () => (
<div>
<h1>I'm a react component</h1>
<div>
<MyVueComponent message='Hello from Vue!' />
</div>
</div>
)The preferred way to use React inside of a Vue app is to use a Vue plugin.
import Vue from 'vue'
import { VuePlugin } from 'vuera'
Vue.use(VuePlugin)
/* ... */Now, use your React components like you would normally use your Vue components!
<template>
<div>
<h1>I'm a Vue component</h1>
<my-react-component :message="message" @reset="reset" />
</div>
</template>
<script>
import MyReactComponent from './MyReactComponent'
export default {
data () {
message: 'Hello from React!',
},
methods: {
reset () {
this.message = ''
}
},
components: { 'my-react-component': MyReactComponent },
}
</script>If you configure options in the root instance of a Vue, those will not be passed by default to Vue instances within React components. So, for example an i18n or a store instance option configured at the top level is not available in the children Vue components wrapped in React components. To fix this, configure vueInstanceOptions similar to:
import Vue from 'vue'
// import other plugins or modules
import { config } from 'vuera'
// Vue.use(...)
config.vueInstanceOptions = { plugin: thePlugIn, store: myStore };NOTE: If you're using Vue < 2.4, you must pass all props to your React components via a
special prop called passedProps:
<template>
<div>
<h1>I'm a Vue component</h1>
<my-react-component :passedProps="passedProps"></my-react-component>
</div>
</template>
<script>
import { ReactWrapper } from 'vuera'
import MyReactComponent from './MyReactComponent'
export default {
data () {
message: 'Hello from React!',
},
methods: {
reset () {
this.message = ''
}
},
computed: {
passedProps () {
return {
message: this.message,
reset: this.reset,
}
},
},
components: { 'my-react-component': MyReactComponent },
}
</script>If you don't want to use the Babel plugin, you still have two ways of using this library.
- Use a wrapper component:
import React from 'react'
import { VueWrapper } from 'vuera'
import MyVueComponent from './MyVueComponent.vue'
export default () => (
<div>
<VueWrapper
component={MyVueComponent}
message='Hello from Vue!'
/>
</div>
)- Or use the HOC API:
import React from 'react'
import { VueInReact } from 'vuera'
import MyVueComponent from './MyVueComponent.vue'
export default () => {
const Component = VueInReact(MyVueComponent)
return (
<div>
<Component message='Hello from Vue!' />
</div>
)
}If you don't want to use the Vue plugin, you still have two ways of using this library.
- Use a wrapper component:
<template>
<div>
<react :component="component" :message="message" />
</div>
</template>
<script>
import { ReactWrapper } from 'vuera'
import MyReactComponent from './MyReactComponent'
export default {
data () {
component: MyReactComponent,
message: 'Hello from React!',
},
components: { react: ReactWrapper }
}
</script>- Use the HOC API:
<template>
<div>
<my-react-component :message="message" />
</div>
</template>
<script>
import { ReactInVue } from 'vuera'
import MyReactComponent from './MyReactComponent'
export default {
data () {
message: 'Hello from React!',
},
components: { 'my-react-component': ReactInVue(MyReactComponent) }
}
</script>Yes. You can pass children from React to Vue and back as you usually would.
React (children will go to the default slot of the Vue component):
import React from 'react'
import MyVueComponent from './MyVueComponent.vue'
export default props =>
<div>
<MyVueComponent message={props.message}>
Hello there!
</MyVueComponent>
</div>Vue:
<template>
<div>
<my-react-component :message="message">
G'day sir
</my-react-component>
</div>
</template>
<script>
import MyReactComponent from './MyReactComponent'
export default {
components: { 'my-react-component': MyReactComponent },
}
</script>I don't know, but the benchmark is coming. Stay tuned.
Integrating React and Vue Components in One Application by @josephrexme