I have a dream, I hope that can load a components of other frameworks as simple as loading a <iframe> tag in a react project.

git clone [email protected]:y805939188/react-vue-micro-frame.git
cd react-vue-micro-frame
npm install
npm run start

npm install --save react-vue-micro-frame

  /** Load remote components **/
  import React from 'react';
  import VueFrame from 'react-vue-micro-frame';
  const Test = () => (
    <div>
      <VueFrame jsurl="http://originPath/vueComponent.umd.js"/>
    </div>
  )

  /** Load local components **/
  import React from 'react';
  import VueFrame from 'react-vue-micro-frame';
  import VueComponent from './vueComponent.vue';
  const Test = () => (
    <div>
      <VueFrame componet={VueComponent} />
    </div>
  )

  /** You can also load a remote react component **/
  import React from 'react';
  import { ReactFrame } from 'react-vue-micro-frame';
  const Test = () => (
    <div>
      <ReactFrame jsurl="http://reactComponentAddress.umd.js" />
    </div>
  )

  NOTE: Components development must use the umd specification.
  I recommend using "vue-cli" to write a "vue" component.
  How to write a "vue" component with use "vue-cli"
  And you can use the "shin-cli" to easily create a react component that meets the umd.

Only jsurl or component attributes are required, other parameters are optional

• Load remote vue components
• Load local vue or react components
• Cross domain loading
• Static resource loading
• css style isolation
• Load the entire vue application

1. The style isolation uses the shadow dom method, so temporarily does not support ie
2. Static resources only support resources that are loaded through the src attribute, such as image and other resources, without any processing. For resources like ttf, there may be cross-domain situations.
3. vue-cli will extract the css file separately by default, you can load the remote css through the cssurl property, or you can put the css into the js file by inline:

/** vue-cli's vue.config.js */
module.exports = {
  css: {
    extract: false,
  },
}

4. Please try and mention more bugs, I will continue to improve. If it is convenient, please give a star by the way.