diff --git a/.changeset/afraid-planets-juggle.md b/.changeset/afraid-planets-juggle.md new file mode 100644 index 00000000000..d6a0811e15b --- /dev/null +++ b/.changeset/afraid-planets-juggle.md @@ -0,0 +1,5 @@ +--- +'@module-federation/bridge-vue3': patch +--- + +fix(vue3-bridge): bridge-vue3 parameter lossing issue diff --git a/apps/router-demo/router-host-2000/src/App.tsx b/apps/router-demo/router-host-2000/src/App.tsx index c2cc5e18e44..e4d79000905 100644 --- a/apps/router-demo/router-host-2000/src/App.tsx +++ b/apps/router-demo/router-host-2000/src/App.tsx @@ -135,7 +135,7 @@ const App = () => { path="/remote2/*" Component={() => } /> - } /> + } /> } /> + + diff --git a/apps/router-demo/router-remote3-2003/src/export-app.ts b/apps/router-demo/router-remote3-2003/src/export-app.ts index 8dc83e648aa..e7cade5289d 100644 --- a/apps/router-demo/router-remote3-2003/src/export-app.ts +++ b/apps/router-demo/router-remote3-2003/src/export-app.ts @@ -1,12 +1,13 @@ -import { createApp } from 'vue'; import App from './App.vue'; -import './index.css'; import router from './router'; import { createBridgeComponent } from '@module-federation/bridge-vue3'; +import './index.css'; export default createBridgeComponent({ rootComponent: App, - appOptions: () => ({ - router, - }), + appOptions: ({ app }) => { + // Optional: adding a plugin to the new Vue instance on the host application side + // app.use(customPlugin); + return { router }; + }, }); diff --git a/packages/bridge/vue3-bridge/src/provider.ts b/packages/bridge/vue3-bridge/src/provider.ts index 1c64d5a26d2..77239ca2dea 100644 --- a/packages/bridge/vue3-bridge/src/provider.ts +++ b/packages/bridge/vue3-bridge/src/provider.ts @@ -28,7 +28,8 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) { __APP_VERSION__, async render(info: RenderFnParams) { LoggerInstance.debug(`createBridgeComponent render Info`, info); - const app = Vue.createApp(bridgeInfo.rootComponent); + const { moduleName, dom, basename, memoryRoute, ...propsInfo } = info; + const app = Vue.createApp(bridgeInfo.rootComponent, propsInfo); rootMap.set(info.dom, app); const beforeBridgeRenderRes = @@ -43,8 +44,9 @@ export function createBridgeComponent(bridgeInfo: ProviderFnParams) { const bridgeOptions = bridgeInfo.appOptions({ app, - basename: info.basename, - memoryRoute: info.memoryRoute, + basename, + memoryRoute, + ...propsInfo, ...extraProps, });