Skip to content

Instantly share code, notes, and snippets.

@tsukhu
Last active September 12, 2020 08:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tsukhu/6be034460f92651dddefb6858f4e727a to your computer and use it in GitHub Desktop.
Save tsukhu/6be034460f92651dddefb6858f4e727a to your computer and use it in GitHub Desktop.
WP5 dynamically load VueJS remote in a React JS Host
// Dynamically mount
// loadComponent('myvueapp','./FullApp','myid')
function loadComponent(scope, module,divId ) {
window[scope].get(module).then((m) => {
m().default(`#${scope}-app-${divId}`);
});
}
// Expose FullApp
....
new ModuleFederationPlugin({
name: "myvueapp",
library: { type: "var", name: "myvueapp" },
filename: "remoteEntry.js",
remotes: {},
exposes: {
"./FullApp": "./src/FullApp"
}
shared: {} // Need to relook at using this ... require("./package.json").dependencies,
}),
import { createApp } from "vue";
import App from "./App.vue";
const FullApp = (id) => {
const app = createApp(App);
app.mount(id);
}
export default FullApp;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment