{"id":13452002,"url":"https://github.com/akxcv/vuera","last_synced_at":"2025-09-28T23:30:23.175Z","repository":{"id":39175487,"uuid":"105071111","full_name":"akxcv/vuera","owner":"akxcv","description":":eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:","archived":true,"fork":false,"pushed_at":"2023-09-19T11:34:22.000Z","size":367,"stargazers_count":4281,"open_issues_count":90,"forks_count":239,"subscribers_count":48,"default_branch":"master","last_synced_at":"2024-05-15T13:14:40.455Z","etag":null,"topics":["babel-plugin","interop","migrate","react","seamless-integration","vue","vue-plugin"],"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/akxcv.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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}},"created_at":"2017-09-27T21:26:27.000Z","updated_at":"2024-06-18T12:16:09.112Z","dependencies_parsed_at":"2024-06-18T12:15:51.160Z","dependency_job_id":"c9c032e0-443b-4ee2-b68b-3fc4c2e1ef8c","html_url":"https://github.com/akxcv/vuera","commit_stats":{"total_commits":68,"total_committers":10,"mean_commits":6.8,"dds":"0.27941176470588236","last_synced_commit":"285c0bb34c0d3131c92b591270088cded014087c"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akxcv%2Fvuera","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akxcv%2Fvuera/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akxcv%2Fvuera/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akxcv%2Fvuera/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akxcv","download_url":"https://codeload.github.com/akxcv/vuera/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234569722,"owners_count":18854133,"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":["babel-plugin","interop","migrate","react","seamless-integration","vue","vue-plugin"],"created_at":"2024-07-31T07:01:09.726Z","updated_at":"2025-09-28T23:30:22.765Z","avatar_url":"https://github.com/akxcv.png","language":"JavaScript","readme":"# vuera\n[![Build Status](https://travis-ci.org/akxcv/vuera.svg?branch=master)](https://travis-ci.org/akxcv/vuera)\n[![Coverage Status](https://coveralls.io/repos/github/akxcv/vuera/badge.svg?branch=master)](https://coveralls.io/github/akxcv/vuera?branch=master)\n\n\u003e [⚠️ Vuera has been archived.](https://github.com/akxcv/vuera/issues/169)\n\n\u003e Check out [veaury](https://github.com/devilwjp/veaury) or [vuera-ts](https://github.com/nmpribeiro/vuera-ts) for a more up-to date library.\n\nUse [Vue] components in your [React] app:\n```jsx\nimport React from 'react'\nimport MyVueComponent from './MyVueComponent.vue'\n\nexport default props =\u003e\n  \u003cdiv\u003e\n    \u003cMyVueComponent message={props.message} handleReset={props.handleReset} /\u003e\n  \u003c/div\u003e\n```\n\nOr use [React] components in your [Vue] app:\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cmy-react-component :message=\"message\" @reset=\"reset\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import MyReactComponent from './MyReactComponent'\n\n  export default {\n    /* data, methods, etc */\n    components: { 'my-react-component': MyReactComponent },\n  }\n\u003c/script\u003e\n```\n\n## Use cases\n\n- 👨‍👩‍👧 Using both Vue and React in one app\n- 🏃 Migrating from React to Vue or from Vue to React\n\n## Installation\n\nInstall with yarn:\n\n```sh\n$ yarn add vuera\n# or with npm:\n$ npm i -S vuera\n```\n\nYou can also try the library out via [unpkg]:\n```html\n\u003cscript src=\"https://unpkg.com/vuera\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Vue in React - Preferred usage\n\nThe preferred way to use Vue inside of a React app is to use a Babel plugin.\n\nAdd `vuera/babel` to `plugins` section of your `.babelrc`:\n```json\n{\n  \"presets\": \"react\",\n  \"plugins\": [\"vuera/babel\"]\n}\n```\n\nNow, just use your Vue components like you would use your React components!\n\n```jsx\nimport React from 'react'\nimport MyVueComponent from './MyVueComponent.vue'\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eI'm a react component\u003c/h1\u003e\n    \u003cdiv\u003e\n      \u003cMyVueComponent message='Hello from Vue!' /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n)\n```\n\n### React in Vue - Preferred usage\n\nThe preferred way to use React inside of a Vue app is to use a Vue plugin.\n\n```js\nimport Vue from 'vue'\nimport { VuePlugin } from 'vuera'\n\nVue.use(VuePlugin)\n/* ... */\n```\n\nNow, use your React components like you would normally use your Vue components!\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eI'm a Vue component\u003c/h1\u003e\n    \u003cmy-react-component :message=\"message\" @reset=\"reset\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import MyReactComponent from './MyReactComponent'\n\n  export default {\n    data () {\n      message: 'Hello from React!',\n    },\n    methods: {\n      reset () {\n        this.message = ''\n      }\n    },\n    components: { 'my-react-component': MyReactComponent },\n  }\n\u003c/script\u003e\n```\n\nIf 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:\n\n```js\nimport Vue from 'vue'\n// import other plugins or modules\nimport { config } from 'vuera'\n\n// Vue.use(...)\n\nconfig.vueInstanceOptions = { plugin: thePlugIn, store: myStore };\n```\n\n**NOTE**: If you're using Vue \u003c 2.4, you *must* pass all props to your React components via a\nspecial prop called `passedProps`:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003eI'm a Vue component\u003c/h1\u003e\n    \u003cmy-react-component :passedProps=\"passedProps\"\u003e\u003c/my-react-component\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { ReactWrapper } from 'vuera'\n  import MyReactComponent from './MyReactComponent'\n\n  export default {\n    data () {\n      message: 'Hello from React!',\n    },\n    methods: {\n      reset () {\n        this.message = ''\n      }\n    },\n    computed: {\n      passedProps () {\n        return {\n          message: this.message,\n          reset: this.reset,\n        }\n      },\n    },\n    components: { 'my-react-component': MyReactComponent },\n  }\n\u003c/script\u003e\n```\n\n### Vue in React - without the Babel plugin\n\nIf you don't want to use the Babel plugin, you still have two ways of using this library.\n\n1. Use a wrapper component:\n\n```jsx\nimport React from 'react'\nimport { VueWrapper } from 'vuera'\nimport MyVueComponent from './MyVueComponent.vue'\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cVueWrapper\n      component={MyVueComponent}\n      message='Hello from Vue!'\n    /\u003e\n  \u003c/div\u003e\n)\n```\n\n2. Or use the HOC API:\n\n```jsx\nimport React from 'react'\nimport { VueInReact } from 'vuera'\nimport MyVueComponent from './MyVueComponent.vue'\n\nexport default () =\u003e {\n  const Component = VueInReact(MyVueComponent)\n  return (\n    \u003cdiv\u003e\n      \u003cComponent message='Hello from Vue!' /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### React in Vue - without the Vue plugin\n\nIf you don't want to use the Vue plugin, you still have two ways of using this library.\n\n1. Use a wrapper component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003creact :component=\"component\" :message=\"message\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { ReactWrapper } from 'vuera'\n  import MyReactComponent from './MyReactComponent'\n\n  export default {\n    data () {\n      component: MyReactComponent,\n      message: 'Hello from React!',\n    },\n    components: { react: ReactWrapper }\n  }\n\u003c/script\u003e\n```\n\n2. Use the HOC API:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cmy-react-component :message=\"message\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import { ReactInVue } from 'vuera'\n  import MyReactComponent from './MyReactComponent'\n\n  export default {\n    data () {\n      message: 'Hello from React!',\n    },\n    components: { 'my-react-component': ReactInVue(MyReactComponent) }\n  }\n\u003c/script\u003e\n```\n\n## FAQ (I think)\n\n### Are children supported?\n\nYes. You can pass children from React to Vue and back as you usually would.\n\nReact (children will go to the default slot of the Vue component):\n\n```jsx\nimport React from 'react'\nimport MyVueComponent from './MyVueComponent.vue'\n\nexport default props =\u003e\n  \u003cdiv\u003e\n    \u003cMyVueComponent message={props.message}\u003e\n      Hello there!\n    \u003c/MyVueComponent\u003e\n  \u003c/div\u003e\n```\n\nVue:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cmy-react-component :message=\"message\"\u003e\n      G'day sir\n    \u003c/my-react-component\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import MyReactComponent from './MyReactComponent'\n\n  export default {\n    components: { 'my-react-component': MyReactComponent },\n  }\n\u003c/script\u003e\n```\n\n### What's the performance? How fast/slow is it compared to pure React / Vue?\n\nI don't know, but the benchmark is coming. Stay tuned.\n\n## Articles\n\n[Integrating React and Vue Components in One Application](https://x-team.com/blog/react-vue-component-integration/)\nby [@josephrexme](https://github.com/josephrexme)\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n\n[react]: https://facebook.github.io/react\n[vue]: https://vuejs.org\n[unpkg]: https://unpkg.com\n","funding_links":[],"categories":["JavaScript","Vue","Frameworks"],"sub_categories":["Docker Custom Builds","Rest of the Pack"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakxcv%2Fvuera","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakxcv%2Fvuera","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakxcv%2Fvuera/lists"}