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 createRemoteAppComponent can be used to load application-level modules.

Installation

npm

yarn

pnpm

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

Type

function createRemoteAppComponent<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;
    // Parameters that will be passed to defineAsyncComponent
    asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
    // Attributes that will be bound to the root container where the remote Vue application will be mounted
    rootAttrs?: Record<string, unknown>;
    // Use memory history for isolated routing (e.g., rendering inside a modal or sandbox)
    memoryRoute?: { entryPath: string };
    // Use hash-based history instead of the default web history
    hashRoute?: boolean;
  }
): (props: {
    basename?: string;
    memoryRoute?: { entryPath: string };
}) => DefineComponent;


function createBridgeComponent(bridgeInfo: {
  rootComponent: VueComponent;
  appOptions?: (params: {
    app: Vue.App<VueComponent>;
    basename?: string;
    memoryRoute?: { entryPath: string };
    hashRoute?: boolean;
    [key: string]: any;
  }) => { router?: Router } | void;
}): () => {
  render(info: {
    name?: string;
    basename?: string;
    memoryRoute?: {
      entryPath: string;
    };
    hashRoute?: boolean;
    dom?: HTMLElement;
  }): void;
  destroy(info: {
    dom: HTMLElement;
  }): void;
}

Example

Remote

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

export default createBridgeComponent({
  rootComponent: App,
  appOptions: ({app}) => {
    // Optional: adding a plugin to the new Vue instance on the host application side
    app.use(customPlugin);
    return { router };
  },
});

// rsbuild.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default defineConfig({
  plugins: [
    pluginModuleFederation({
      name: 'remote1',
      exposes: {
        './export-app': './src/export-app.ts',
      },
      shared: ['vue', 'vue-router'],
    }),
  ],
});

Host

//rsbuild.config.ts
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default defineConfig({
  plugins: [
    pluginModuleFederation({
      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.createRemoteAppComponent({ loader: () => loadRemote('remote1/export-app'), rootAttrs: {class: 'root-element-class'} });

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

Routing Modes

The bridge supports three routing modes that determine how the remote application manages its internal navigation:

Mode	Option	History Type	Use Case
Web History (default)	—	`createWebHistory(basename)`	Standard URL-based routing. The `basename` is automatically derived from the host route match.
Memory History	`memoryRoute: { entryPath: '/path' }`	`createMemoryHistory(basename)`	Isolated routing that does not affect the browser URL. Useful when the remote app is rendered inside a modal, sidebar, or sandbox.
Hash History	`hashRoute: true`	`createWebHashHistory()`	Hash-based routing (`#/path`). Route paths are automatically prefixed with the `basename`.

Hash route example

// ./src/router.ts
import * as bridge from '@module-federation/bridge-vue3';

const Remote1 = bridge.createRemoteAppComponent({
  loader: () => loadRemote('remote1/export-app'),
  hashRoute: true,
});

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/remote1/:pathMatch(.*)*', component: Remote1 },
  ],
});
export default router;

Memory route example

// ./src/router.ts
import * as bridge from '@module-federation/bridge-vue3';

const Remote1 = bridge.createRemoteAppComponent({
  loader: () => loadRemote('remote1/export-app'),
  memoryRoute: { entryPath: '/initial-page' },
});

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

Parameters

createRemoteAppComponent

function createRemoteAppComponent<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;
    // Parameters that will be passed to defineAsyncComponent
    asyncComponentOptions?: Omit<AsyncComponentOptions, 'loader'>;
    // Attributes that will be bound to the root container where the remote Vue application will be mounted
    rootAttrs?: Record<string, unknown>;
    // Use memory history for isolated routing (e.g., rendering inside a modal or sandbox)
    memoryRoute?: { entryPath: string };
    // Use hash-based history instead of the default web history
    hashRoute?: boolean;
  }
): (props: {
    basename?: string;
    memoryRoute?: { entryPath: string };
}) => DefineComponent;

const Remote1App = createRemoteAppComponent({ loader: () => 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
- asyncComponentOptions
  - type: Omit<AsyncComponentOptions, 'loader'>
  - Purpose: Parameters that will be passed to defineAsyncComponent, except for the loader parameter
- rootAttrs
  - type: Record<string, unknown>
  - Purpose: Attributes that will be bound to the root container where the remote Vue application will be mounted
- memoryRoute
  - type: { entryPath: string }
  - Purpose: When provided, the remote application will use memory history (createMemoryHistory) instead of the default web history. The entryPath sets the initial route the remote app navigates to on mount. Useful when the remote app is rendered in an isolated context (e.g., a modal or sandbox) where it should not modify the browser URL.
- hashRoute
  - type: boolean
  - Purpose: When set to true, the remote application will use hash-based history (createWebHashHistory) instead of the default web history. Route paths are automatically prefixed with the basename. Use this when the host application also uses hash-based routing.

// remote
export const provider = createBridgeComponent({
  rootComponent: App
});

// host
const Remote1App = createRemoteAppComponent({
  loader: () => 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.createRemoteAppComponent({ loader: () => loadRemote('remote1/export-app'), rootAttrs: {class: 'root-element-class'} });

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

createBridgeComponent

function createBridgeComponent(bridgeInfo: {
  rootComponent: VueComponent;
  appOptions?: (params: {
    app: Vue.App<VueComponent>;
    basename?: string;
    memoryRoute?: { entryPath: string };
    hashRoute?: boolean;
    [key: string]: any;
  }) => { router?: Router } | void;
}): () => {
  render(info: {
    name?: string;
    basename?: string;
    memoryRoute?: {
      entryPath: string;
    };
    hashRoute?: boolean;
    dom?: HTMLElement;
  }): void;
  destroy(info: { dom: HTMLElement }): void;
}

bridgeInfo
- type: { rootComponent: VueComponent; appOptions?: (params: AddOptionsFnParams) => ({ router?: Router }) }
- Purpose: Used to pass the root component
- appOptions receives the following params:
  - app: The Vue application instance
  - basename: The base path derived from the host route
  - memoryRoute: Memory route configuration (if provided by the host)
  - hashRoute: Whether hash-based routing is enabled (if provided by the host)
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 customPlugin from './plugins/custom-vue-plugin';
import router from './router';

export default createBridgeComponent({
  rootComponent: App,
  appOptions: ({app}) => {
    // Optional: adding a plugin to the new Vue instance on the host application side
    app.use(customPlugin)
    return { router };
  },
});

#Vue Bridge (for Vue v3)

#Installation

#Type

#Example

#Routing Modes

#Parameters

#createRemoteAppComponent

#createBridgeComponent