diff --git a/.changeset/bridge-meta-framework-hosts.md b/.changeset/bridge-meta-framework-hosts.md new file mode 100644 index 00000000000..5affcef0057 --- /dev/null +++ b/.changeset/bridge-meta-framework-hosts.md @@ -0,0 +1,5 @@ +--- +'website-new': patch +--- + +Document loading the same Bridge export-app from Nuxt, Next, and Modern.js hosts. diff --git a/apps/website-new/docs/en/guide/bridge/overview.mdx b/apps/website-new/docs/en/guide/bridge/overview.mdx index 613139d0c5b..2eb7f534dfd 100644 --- a/apps/website-new/docs/en/guide/bridge/overview.mdx +++ b/apps/website-new/docs/en/guide/bridge/overview.mdx @@ -16,6 +16,16 @@ Through Bridge, you can: These capabilities make Bridge the core infrastructure for building modern, scalable micro-frontend architectures. +## Meta-framework hosts + +Bridge remotes are framework-agnostic at the host boundary: export once with `createBridgeComponent`, load with the host’s `createRemoteAppComponent`. + +- **Nuxt** (Vue consumer): catch-all route + `@module-federation/bridge-vue3` — see [Vue Bridge practice](/integrations/practice/vue.html#meta-framework-hosts-nuxt-next-modernjs). +- **Next.js / Modern.js** (React consumer): `/remote/*` + `@module-federation/bridge-react` (or `@module-federation/modern-js-v3/react`). +- The **same** Vue `./bridge/export-app` can be mounted in Nuxt **and** React/Next without a second remote build. + +Component-level SSR inside Nuxt remains `@module-federation/nuxt`; Bridge is for application-level routing remotes. + ## Supported Frameworks ### React Bridge (`@module-federation/bridge-react`) diff --git a/apps/website-new/docs/en/integrations/practice/vue.mdx b/apps/website-new/docs/en/integrations/practice/vue.mdx index 39cd21dd6e8..d1936291093 100644 --- a/apps/website-new/docs/en/integrations/practice/vue.mdx +++ b/apps/website-new/docs/en/integrations/practice/vue.mdx @@ -131,6 +131,65 @@ const router = createRouter({ export default router; ``` +## Meta-framework hosts (Nuxt, Next, Modern.js) + +One Bridge remote (`createBridgeComponent` → `./bridge/export-app`) can be loaded by many hosts. The remote does not need a per-host build. + +| Host | Consumer API | Typical mount route | +| --- | --- | --- | +| Vue / Nuxt | `@module-federation/bridge-vue3` `createRemoteAppComponent` | `/remote/:pathMatch(.*)*` | +| React / Next / Modern.js | `@module-federation/bridge-react` `createRemoteAppComponent` | `/remote/*` | + +### Nuxt host tips + +- Mount the Bridge remote as a **client island** (`ClientOnly` / `ssr: false` for that page). Bridge SSR for meta-framework adapters is out of scope of the Vue Bridge CSR path. +- Prefer a host catch-all that uses Vue Router’s `:pathMatch(.*)*` so basename auto-detect works. An explicit `basename` option on `createRemoteAppComponent` is tracked in [core#4984](https://github.com/module-federation/core/pull/4984). +- If you also use `@module-federation/nuxt` component federation, expose the Bridge entry with a **slashed** name (for example `./bridge/export-app`) so host manifest discovery does not register it as a Vue component. + +```ts +// Nuxt host — catch-all page (client only) +// Register route path: '/bridge/:pathMatch(.*)*' +import { createRemoteAppComponent } from '@module-federation/bridge-vue3'; + +const RemoteApp = createRemoteAppComponent({ + loader: () => import('remote/bridge/export-app'), + asyncComponentOptions: { suspensible: false }, +}); +``` + +### React / Next / Modern.js host tips + +Load the **same Vue Bridge remote** with the React consumer: + +```tsx +import { createRemoteAppComponent } from '@module-federation/bridge-react'; + +function BridgeFallback() { + return