This Nuxt application provides Vue components to the host example and runs standalone at http://localhost:4174.
- Remote:
http://localhost:4174 - Host consumer:
http://localhost:4173 - Configuration:
nuxt.config.ts - Exposed components:
app/components/exposed - Bridge app export:
app/export-app.ts→./bridge/export-app
Start both examples from the repository root:
pnpm install
pnpm devOr run only the remote:
pnpm dev:remoteThe port is fixed because the host configuration points to 4174.
@module-federation/nuxt automatically exposes components under app/components/exposed:
Counter.vueas./CounterWidget.vueas./Widget
To add another auto-registered component, create app/components/exposed/Example.vue. After restarting the applications, a single-remote host can render it as <RemoteExample />.
In addition to components, this remote exposes an application-level Bridge module:
./bridge/export-app—createBridgeComponentwrapping a small vue-router app underapp/bridge/
Hosts load it with @module-federation/bridge-vue3 createRemoteAppComponent (see host /bridge/*). The same Bridge export can be consumed from React/Next via @module-federation/bridge-react. Use a slashed expose name so host manifest discovery does not treat it as a Vue component.
Development and production serve the federation contract from the public root:
http://localhost:4174/mf-manifest.jsonhttp://localhost:4174/remoteEntry.jshttp://localhost:4174/remoteEntry.ssr.js
The manifest points browser assets to the application's configured app.buildAssetsDir (/_nuxt by default). The module adds CORS headers to federation assets.
From the repository root:
pnpm build
pnpm previewVerify all three federation URLs above return successfully, then open the host at http://localhost:4173. Its initial HTML should already include both remote components, and their counters should become interactive after hydration. Open /bridge to exercise the Bridge remote (client island).