How to use a Vue app that has plugins installe in a React app?

[gsimplicio-emed]

Hi there, to start off I'd like to thank you for writing such useful lib. Unfortunately, I haven't found out how to use a Vue app, which has plugins installed , in the documentation.

Happy to contribute towards improving anything in this amazing library.

This is the "working" version of what I need to do, could you please help figuring out to how use Vue apps that have plugins in React app? https://github.com/guilhermehkr/vue-react-poc

As you can see below and in the Github repo, I've tried using both Vue app returned by createApp() and the app's root component. Which attempt resolves to a different error.

/**
 * Warning
 [Vue warn]: Component is missing template or render function. 
  at <Anonymous accountId="xxTzEe" streamName="myStreamName" ref="use_vue_wrapper" > 
  at <App>
 */
export const ReactVideoPlayerWrapperBuildWithVueApp = () => {
  const vueApp = createApp(VueVideoPlayer).use(VueVideoPlayerPlugin, {});
  const ReactVideoPlayer = applyVueInReact(vueApp);
  return <ReactVideoPlayer accountId="xxxx" streamName="myStreamName" />;
}

/**
 * Warning
 runtime-core.esm-bundler.js:41 [Vue warn]: Unhandled error during execution of watcher getter 
  at <VideoPlayerContainer class="ml-viewer" id="viewer-container" > 
  at <App paramsOptions= {accountId: 'xxTzEe', streamName: 'myStreamName'}accountId: "xxxx"streamName: "myStreamName"[[Prototype]]: Object > 
  at <VResizable class="resizable" > 
  at <VueVideoPlayer accountId="xxTzEe" streamName="myStreamName" ref="use_vue_wrapper" > 
  at <App>

 * Error thrown
 react-dom.development.js:12056 Uncaught TypeError: Cannot read properties of undefined (reading 'state')
    at Proxy.mappedState (vuex.esm-browser.js:1184:1)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at get value [as value] (reactivity.esm-bundler.js:1147:33)
    at Object.get [as playing] (runtime-core.esm-bundler.js:3407:22)
    at Object.get (runtime-core.esm-bundler.js:2931:16)
    at getter (runtime-core.esm-bundler.js:3516:80)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:32)
    at ReactiveEffect.getter [as fn] (runtime-core.esm-bundler.js:1693:22)
    at ReactiveEffect.run (reactivity.esm-bundler.js:178:19)
    at doWatch (runtime-core.esm-bundler.js:1789:25)
 */
export const ReactVideoPlayerWrapperBuildWithVueRootComponent = () => {
  const vueApp = createApp(VueVideoPlayer).use(VueVideoPlayerPlugin, {});

  // This seems to be required so Vue is able to find components installed by the plugin
  Object.assign(vueApp._component.components, vueApp._context.components);
  const ReactVideoPlayer = applyVueInReact(vueApp._component);
  return <ReactVideoPlayer accountId="xxTzEe" streamName="myStreamName" />;
};

[gsimplicio-emed]

For posterity, I haven't found a way to tackle this use-case. I had to give on using this lib in favour of the following:

import VueVideoPlayerPlugin from '@millicast/vue-viewer-plugin';
import { useEffect, useRef } from 'react';
import { createApp } from 'vue';

import VueVideoPlayer from './VueVideoPlayer.vue';

export const VideoPlayer = (props: VideoPlayerProps) => {
  const vueAppRef = useRef(null);

  useEffect(() => {
    const app = createApp(VueVideoPlayer, props).use(VueVideoPlayerPlugin, {});
    app.mount(vueAppRef.current!);
    return () => app.unmount();
  }, []);

  return <div ref={vueAppRef} />;
};