{"id":15049,"library":"vuera","title":"Vue and React Interoperability Adapter","description":"Vuera is a library designed to enable seamless interoperability between Vue.js and React applications, allowing developers to use Vue components within a React app and vice-versa. It facilitates migration scenarios or the co-existence of both frameworks in a single codebase. The current stable version is 0.2.7. The project appears to have an infrequent release cadence and is currently seeking a new maintainer, indicating a low level of active development. Key differentiators include its dual-framework compatibility and the use of Babel and Vue plugins for simplified integration, abstracting away much of the manual wrapping historically required for such interop solutions. The project's status as 'looking for a maintainer' is a significant factor for potential users.","status":"abandoned","version":"0.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/akxcv/vuera","tags":["javascript","vue","react","interop","adapter","migrate","seamless-integration"],"install":[{"cmd":"npm install vuera","lang":"bash","label":"npm"},{"cmd":"yarn add vuera","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuera","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for React component functionality and interop.","package":"react","optional":false},{"reason":"Required for React component rendering.","package":"react-dom","optional":false},{"reason":"Required for Vue component functionality and interop.","package":"vue","optional":false}],"imports":[{"note":"Used to register Vuera as a Vue plugin for enabling React components within Vue apps.","wrong":"const VuePlugin = require('vuera').VuePlugin","symbol":"VuePlugin","correct":"import { VuePlugin } from 'vuera'"},{"note":"Provides global configuration options for Vuera, such as `vueInstanceOptions` to pass root Vue instance properties to wrapped Vue components.","wrong":"import config from 'vuera/config'","symbol":"config","correct":"import { config } from 'vuera'"},{"note":"A utility wrapper, primarily for advanced use cases or when not using the Babel/Vue plugins, especially for Vue < 2.4 to manually pass props.","wrong":"import ReactWrapper from 'vuera/react-wrapper'","symbol":"ReactWrapper","correct":"import { ReactWrapper } from 'vuera'"}],"quickstart":{"code":"import Vue from 'vue'\nimport { VuePlugin, config } from 'vuera'\nimport MyReactComponent from './MyReactComponent'\n\n// Configure global Vue instance options for wrapped Vue components\n// For example, if you have a Vuex store or i18n plugin\nconst myStore = {}; // Placeholder for your Vuex store\nconfig.vueInstanceOptions = { store: myStore };\n\nVue.use(VuePlugin)\n\n// Example Vue component using a React component\nconst app = new Vue({\n el: '#app',\n data: {\n message: 'Hello from Vue, rendered by React!',\n reactProp: 'Initial value'\n },\n methods: {\n handleReset() {\n this.reactProp = 'Reset value from React!';\n console.log('Reset event received from React!');\n }\n },\n components: {\n 'my-react-component': MyReactComponent\n },\n template: `\n
\n
Vue App
\n
{{ message }}
\n \n
\n `\n});\n\n// In MyReactComponent.js (simple example)\n// import React from 'react';\n// const MyReactComponent = ({ message, onReset }) => (\n//
\n//
I'm a React Component
\n//
Prop from Vue: {message}
\n// \n//
\n// );\n// export default MyReactComponent;\n","lang":"javascript","description":"Demonstrates how to integrate a React component into a Vue application using Vuera's Vue plugin, including configuring shared Vue instance options."},"warnings":[{"fix":"For Vue < 2.4, wrap all props in a computed property named `passedProps` and bind it to the React component: ``.","message":"Vue.js versions older than 2.4 require props to React components to be passed via a special `passedProps` prop, not directly.","severity":"breaking","affected_versions":"<2.4.0"},{"fix":"Use `import { config } from 'vuera'; config.vueInstanceOptions = { /* your options */ };` to explicitly configure these options globally.","message":"Root Vue instance options (like plugins, stores, i18n) are not automatically inherited by Vue components wrapped within React components.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Evaluate the stability requirements of your project. Consider alternative interop solutions or be prepared to contribute to maintenance.","message":"The project is explicitly looking for a new maintainer, indicating potential for lack of updates, bug fixes, or new features.","severity":"gotcha","affected_versions":">=0.2.7"},{"fix":"Add `vuera/babel` to the `plugins` section of your `.babelrc` or Babel configuration to simplify Vue component usage in React.","message":"When embedding Vue components in React, the preferred method is to use the provided Babel plugin (`vuera/babel`). Omitting this requires manual wrapping.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure `import { VuePlugin } from 'vuera'; Vue.use(VuePlugin);` is called early in your Vue application setup.","message":"When embedding React components in Vue, the preferred method is to use the Vue plugin (`Vue.use(VuePlugin)`).","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that `react`, `react-dom`, and `vue` peer dependencies meet the required versions (`>= 15.2.0` for React/ReactDOM, `>= 2.2` for Vue) and are correctly installed.","cause":"Often related to Vue or React versions being incompatible or not correctly installed as peer dependencies.","error":"Error: Cannot read property 'prototype' of undefined"},{"fix":"Ensure `import { VuePlugin } from 'vuera'; Vue.use(VuePlugin);` is executed in your main Vue app file, and the React component is imported and listed in the `components` option of your Vue component.","cause":"The Vue plugin for Vuera was not registered, or the component was not imported/registered correctly in the Vue component.","error":"[Vue warn]: Unknown custom element: - did you register the component correctly?"},{"fix":"Ensure `import React from 'react';` is present in your React component files that consume Vue components, even if not explicitly used, as the Babel plugin might rely on it.","cause":"When using Vue components in React via the Babel plugin, React might not be in scope for the transpiled component.","error":"ReferenceError: React is not defined"},{"fix":"Use `import { config } from 'vuera'; config.vueInstanceOptions = { store: myStore, i18n: myI18n };` to pass these options to all wrapped Vue instances.","cause":"A Vue component wrapped by Vuera is trying to access a global Vue instance property (like `this.$store` or `this.$i18n`) that was configured at the root Vue instance but not passed to the wrapped component's context.","error":"TypeError: Cannot read properties of undefined (reading 'store') in wrapped Vue component"}],"ecosystem":"npm"}