Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/akxcv/vuera

:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:
https://github.com/akxcv/vuera

babel-plugin interop migrate react seamless-integration vue vue-plugin

Last synced: 4 months ago
JSON representation

:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

Awesome Lists containing this project

README 

        
# vuera

[![Build Status](https://travis-ci.org/akxcv/vuera.svg?branch=master)](https://travis-ci.org/akxcv/vuera)

[![Coverage Status](https://coveralls.io/repos/github/akxcv/vuera/badge.svg?branch=master)](https://coveralls.io/github/akxcv/vuera?branch=master)



> [⚠️ Vuera has been archived.](https://github.com/akxcv/vuera/issues/169)



> Check out [veaury](https://github.com/devilwjp/veaury) or [vuera-ts](https://github.com/nmpribeiro/vuera-ts) for a more up-to date library.



Use [Vue] components in your [React] app:

```jsx

import React from 'react'

import MyVueComponent from './MyVueComponent.vue'



export default props =>

  


    

  


```



Or use [React] components in your [Vue] app:

```vue



  


    

  



  import MyReactComponent from './MyReactComponent'



  export default {

    /* data, methods, etc */

    components: { 'my-react-component': MyReactComponent },

  }



```



## Use cases



- 👨‍👩‍👧 Using both Vue and React in one app

- 🏃 Migrating from React to Vue or from Vue to React



## Installation



Install with yarn:



```sh

$ yarn add vuera

# or with npm:

$ npm i -S vuera

```



You can also try the library out via [unpkg]:

```html



```



## Usage



### Vue in React - Preferred usage



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`:

```json

{

  "presets": "react",

  "plugins": ["vuera/babel"]

}

```



Now, just use your Vue components like you would use your React components!



```jsx

import React from 'react'

import MyVueComponent from './MyVueComponent.vue'



export default () => (

  


    
I'm a react component


    


      

    


  


)

```



### React in Vue - Preferred usage



The preferred way to use React inside of a Vue app is to use a Vue plugin.



```js

import Vue from 'vue'

import { VuePlugin } from 'vuera'



Vue.use(VuePlugin)

/* ... */

```



Now, use your React components like you would normally use your Vue components!



```vue



  


    
I'm a Vue component


    

  



  import MyReactComponent from './MyReactComponent'



  export default {

    data () {

      message: 'Hello from React!',

    },

    methods: {

      reset () {

        this.message = ''

      }

    },

    components: { 'my-react-component': MyReactComponent },

  }



```



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:



```js

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`:



```vue



  


    
I'm a Vue component


    

  



  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 },

  }



```



### Vue in React - without the Babel plugin



If you don't want to use the Babel plugin, you still have two ways of using this library.



1. Use a wrapper component:



```jsx

import React from 'react'

import { VueWrapper } from 'vuera'

import MyVueComponent from './MyVueComponent.vue'



export default () => (

  


    

  


)

```



2. Or use the HOC API:



```jsx

import React from 'react'

import { VueInReact } from 'vuera'

import MyVueComponent from './MyVueComponent.vue'



export default () => {

  const Component = VueInReact(MyVueComponent)

  return (

    


      

    


  )

}

```



### React in Vue - without the Vue plugin



If you don't want to use the Vue plugin, you still have two ways of using this library.



1. Use a wrapper component:



```vue



  


    

  



  import { ReactWrapper } from 'vuera'

  import MyReactComponent from './MyReactComponent'



  export default {

    data () {

      component: MyReactComponent,

      message: 'Hello from React!',

    },

    components: { react: ReactWrapper }

  }



```



2. Use the HOC API:



```vue



  


    

  



  import { ReactInVue } from 'vuera'

  import MyReactComponent from './MyReactComponent'



  export default {

    data () {

      message: 'Hello from React!',

    },

    components: { 'my-react-component': ReactInVue(MyReactComponent) }

  }



```



## FAQ (I think)



### Are children supported?



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):



```jsx

import React from 'react'

import MyVueComponent from './MyVueComponent.vue'



export default props =>

  


    

      Hello there!

    

  


```



Vue:



```vue



  


    

      G'day sir

    

  



  import MyReactComponent from './MyReactComponent'



  export default {

    components: { 'my-react-component': MyReactComponent },

  }



```



### What's the performance? How fast/slow is it compared to pure React / Vue?



I don't know, but the benchmark is coming. Stay tuned.



## Articles



[Integrating React and Vue Components in One Application](https://x-team.com/blog/react-vue-component-integration/)

by [@josephrexme](https://github.com/josephrexme)



## License



[MIT](http://opensource.org/licenses/MIT)



[react]: https://facebook.github.io/react

[vue]: https://vuejs.org

[unpkg]: https://unpkg.com