Vue and React Interoperability Adapter

Common errors

• Error: Cannot read property 'prototype' of undefined

  cause Often related to Vue or React versions being incompatible or not correctly installed as peer dependencies.
  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.

• [Vue warn]: Unknown custom element: <my-react-component> - did you register the component correctly?

  cause The Vue plugin for Vuera was not registered, or the component was not imported/registered correctly in the Vue component.
  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.

• ReferenceError: React is not defined

  cause When using Vue components in React via the Babel plugin, React might not be in scope for the transpiled component.
  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.

• TypeError: Cannot read properties of undefined (reading 'store') in wrapped Vue component

  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.
  fix Use `import { config } from 'vuera'; config.vueInstanceOptions = { store: myStore, i18n: myI18n };` to pass these options to all wrapped Vue instances.

Warnings

• breaking Vue.js versions older than 2.4 require props to React components to be passed via a special `passedProps` prop, not directly.
  Fix: For Vue < 2.4, wrap all props in a computed property named `passedProps` and bind it to the React component: `<my-react-component :passedProps="computedPropsObject"></my-react-component>`.
• gotcha Root Vue instance options (like plugins, stores, i18n) are not automatically inherited by Vue components wrapped within React components.
  Fix: Use `import { config } from 'vuera'; config.vueInstanceOptions = { /* your options */ };` to explicitly configure these options globally.
• gotcha The project is explicitly looking for a new maintainer, indicating potential for lack of updates, bug fixes, or new features.
  Fix: Evaluate the stability requirements of your project. Consider alternative interop solutions or be prepared to contribute to maintenance.
• gotcha When embedding Vue components in React, the preferred method is to use the provided Babel plugin (`vuera/babel`). Omitting this requires manual wrapping.
  Fix: Add `vuera/babel` to the `plugins` section of your `.babelrc` or Babel configuration to simplify Vue component usage in React.
• gotcha When embedding React components in Vue, the preferred method is to use the Vue plugin (`Vue.use(VuePlugin)`).
  Fix: Ensure `import { VuePlugin } from 'vuera'; Vue.use(VuePlugin);` is called early in your Vue application setup.

Install

• npm install vuera npm
• yarn add vuera yarn
• pnpm add vuera pnpm

Imports

• VuePlugin
  wrong:

  const VuePlugin = require('vuera').VuePlugin

  correct:

  import { VuePlugin } from 'vuera'

  Used to register Vuera as a Vue plugin for enabling React components within Vue apps.
• config
  wrong:

  import config from 'vuera/config'

  correct:

  import { config } from 'vuera'

  Provides global configuration options for Vuera, such as `vueInstanceOptions` to pass root Vue instance properties to wrapped Vue components.
• ReactWrapper
  wrong:

  import ReactWrapper from 'vuera/react-wrapper'

  correct:

  import { ReactWrapper } from 'vuera'

  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.

Quickstart

Demonstrates how to integrate a React component into a Vue application using Vuera's Vue plugin, including configuring shared Vue instance options.

import Vue from 'vue'
import { VuePlugin, config } from 'vuera'
import MyReactComponent from './MyReactComponent'

// Configure global Vue instance options for wrapped Vue components
// For example, if you have a Vuex store or i18n plugin
const myStore = {}; // Placeholder for your Vuex store
config.vueInstanceOptions = { store: myStore };

Vue.use(VuePlugin)

// Example Vue component using a React component
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello from Vue, rendered by React!',
    reactProp: 'Initial value'
  },
  methods: {
    handleReset() {
      this.reactProp = 'Reset value from React!';
      console.log('Reset event received from React!');
    }
  },
  components: {
    'my-react-component': MyReactComponent
  },
  template: `
    <div>
      <h1>Vue App</h1>
      <p>{{ message }}</p>
      <my-react-component :message="reactProp" @reset="handleReset" />
    </div>
  `
});

// In MyReactComponent.js (simple example)
// import React from 'react';
// const MyReactComponent = ({ message, onReset }) => (
//   <div>
//     <h2>I'm a React Component</h2>
//     <p>Prop from Vue: {message}</p>
//     <button onClick={onReset}>Reset</button>
//   </div>
// );
// export default MyReactComponent;