Guide
Practice
Configuration
Plugins
Showcase
Blog
Guide
Practice
Configuration
Plugins
Showcase
Blog

Vue Bridge (for Vue v3)

@module-federation/bridge-vue3 provides a bridge utility function for Vue v3 applications. The provided createBridgeComponent can be used to export application-level modules, and createRemoteComponent can be used to load application-level modules.

Installation

npm
yarn
pnpm
npm install @module-federation/bridge-vue3@latest

Type

function createRemoteComponent<T, E extends keyof T>(
  // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app')
  lazyComponent: () => Promise<T>,
  info?:
 {
    // Default is 'default', used to specify module export
    export?: E;
  }
): (props: {
    basename?: string;
    memoryRoute?: { entryPath: string };
}) => DefineComponent;

function createBridgeComponent(bridgeInfo: {
  rootComponent: VueComponent;
}): () => {
  render(info: {
    name?: string;
    basename?: string;
    memoryRoute?: {
      entryPath: string;
    };
    dom?: HTMLElement;
  }): void;
  destroy(info: {
    dom: HTMLElement;
  }): void;
}

Example

Remote

// ./src/export-app.ts
import App from './App.vue';
import router from './router';
import { createBridgeComponent } from '@module-federation/bridge-vue3';

export default createBridgeComponent({
  rootComponent: App,
  appOptions: () => ({
    router,
  }),
});
// rsbuild.config.ts
export default defineConfig({
  tools: {
    rspack: (config, { appendPlugins }) => {
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'remote1',
          exposes: {
            './export-app': './src/export-app.ts',
          },
          shared: ['vue', 'vue-router'],
        }),
      ]);
    },
  },
});

Host

// rsbuild.config.ts
export default defineConfig({
  tools: {
    rspack: (config, { appendPlugins }) => {
      config.output!.uniqueName = 'host';
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'host',
          remotes: {
            remote1: 'remote1@http://localhost:2001/mf-manifest.json',
          },
        }),
      ]);
    },
  },
});
// ./src/router.ts
import * as bridge from '@module-federation/bridge-vue3';

const Remote2 = bridge.createRemoteComponent(() =>
  loadRemote('remote1/export-app'),
);

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // Define your routes here
    { path: '/', component: Home },
    { path: '/remote1/:pathMatch(.*)*', component: Remote2 },
    // Other routes
  ],
});
export default router;

Parameters

createRemoteComponent

function createRemoteComponent<T, E extends keyof T>(
  options: {
    // Function to load remote application, e.g., loadRemote('remote1/export-app') or import('remote1/export-app')
    loader: () => Promise<T>,
    // Default is 'default', used to specify module export
    export?: E;
  }
): (props: {
    basename?: string;
    memoryRoute?: { entryPath: string };
}) => DefineComponent;
const Remote1App = createRemoteComponent(() => loadRemote('remote1/export-app'));
  • options
    • loader
      • type: () => Promise<Module>
      • Purpose: Used to load remote modules, e.g., loadRemote('remote1/export-app') or import('remote1/export-app')
    • export
      • type: string
      • Purpose: Used to specify module export
// remote
export const provider = createBridgeComponent({
  rootComponent: App
});

// host
const Remote1App = createRemoteComponent(() => loadRemote('remote1/export-app'), {
  export: 'provider'
});
  • ReturnType
    • type: VueComponent
    • Purpose: Used to render remote module components
import * as bridge from '@module-federation/bridge-vue3';

const Remote2 = bridge.createRemoteComponent(() =>
  loadRemote('remote1/export-app'),
);

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // Define your routes here
    { path: '/', component: Home },
    { path: '/remote1/:pathMatch(.*)*', component: Remote2 },
    // Other routes
  ],
});
export default router;

createBridgeComponent

function createBridgeComponent<T>(bridgeInfo: {
  rootComponent: VueComponent;
  appOptions?: () => ({
    router: Router;
  });
}): () => {
  render(info: {
    name?: string;
    basename?: string;
    memoryRoute?: {
      entryPath: string;
    };
    dom?: HTMLElement;
  }): void;
  destroy(info: { dom: HTMLElement }): void;
}
  • bridgeInfo
    • type: { rootComponent: VueComponent; appOptions?: () => ({ router: Router }) }
    • Purpose: Used to pass the root component
  • ReturnType
    • type: () => { render: (info: RenderFnParams) => void; destroy: (info: { dom: HTMLElement}) => void; }
// ./src/export-app.ts
import { createBridgeComponent } from '@module-federation/bridge-vue3';
import App from './App.vue';
import router from './router';

export default createBridgeComponent({
  rootComponent: App,
  appOptions: () => ({
    router,
  }),
});