fix(vue3-bridge): vue3-bridge parameter lossing issue (#3462)

.changeset/afraid-planets-juggle.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-vue3': patch
+---
+
+fix(vue3-bridge): bridge-vue3 parameter lossing issue

apps/router-demo/router-host-2000/src/App.tsx

@@ -135,7 +135,7 @@ const App = () => {
           path="/remote2/*"
           Component={() => <Remote2App style={{ padding: '20px' }} />}
         />
-        <Route path="/remote3/*" Component={() => <Remote3App />} />
+        <Route path="/remote3/*" Component={() => <Remote3App test="123" />} />
         <Route path="/memory-router/*" Component={() => <Wraper3 />} />
         <Route
           path="/remote-render-error/*"

apps/router-demo/router-remote3-2003/src/App.vue

@@ -11,3 +11,12 @@
 </template>
 
 <style scoped></style>
+
+<script lang="ts" setup>
+interface Props {
+  test?: string;
+}
+
+const props = defineProps<Props>();
+console.log('props', props);
+</script>

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 };
+  },
 });

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,
         });