@module-federation/vite weekly downloads statistics

Vite plugin for Module Federation

Vite and VoidZero recommend this plugin

Read the announcement.

Become a sponsor

Support this project on GitHub Sponsors

Reason why 🤔

Microservices nowadays is a well-known concept and maybe you are using it in your current company. Do you know that now you can apply similar ideas on the Frontend? With Module Federation you can load separately compiled and deployed code into a unique application. This plugin makes Module Federation work together with Vite.

Working implementations

Examples live in gioboa/module-federation-vite-examples:

| Example | Host | Remote | Framework |

| Alpine | alpine-host | alpine-remote | Alpine.js | | Angular | angular-host | angular-remote | Angular | | Astro | astro-host | astro-remote | Astro 7 | | Ember | ember-host | ember-remote | Ember 7 | | Lit | lit-host | lit-remote | Lit | | Nuxt | nuxt-host | nuxt-remote | Nuxt 4 | | Nx | host | remote | React + Nx | | Preact | preact-host | preact-remote | Preact 10 | | React | react-host | react-remote | React 19 | | Solid | solid-host | solid-remote | Solid | | Svelte | svelte-host | svelte-remote | Svelte 5 | | TanStack | tanstack-host | tanstack-remote | TanStack Router + React 19 | | Turborepo | host | remote | React + Turborepo | | Vinext | vinext-host | vinext-remote | Vinext + Next 16 + React 19 | | Vue | vue-host | vue-remote | Vue 3 |

Try this crazy example with all these bundlers together

Getting started 🚀

https://module-federation.io/integrations/build-tool/vite

With @module-federation/vite, the process becomes delightfully simple, you will only find the differences from a normal Vite configuration.

This example is with Vue.js The @module-federation/vite configuration remains the same for different frameworks.

Migrating from OriginJS

Migrating from @originjs/vite-plugin-federation requires an explicit remote-entry format and runtime review, particularly for dynamic remotes, shared dependencies, and mixed bundlers. See the OriginJS migration guide for step-by-step migration and incremental deployment guidance.

Dedicated configuration file

You can keep Module Federation options in module-federation.config.ts.

The Remote Application configuration

file: remote/vite.config.ts

In this remote app configuration, we define a remoteEntry.js file that will expose the App component. The shared property ensures that both host and remote applications use the same vue library.

Host-only shared dependencies

Use import: false when a dependency must be provided by the host and should not be bundled as a local fallback. If it is intentionally not installed locally, the named-export detection warning can be suppressed:

suppressMissingImportWarning defaults to false. Enable it only when the host is guaranteed to provide the dependency and local named-export detection is unnecessary.

In a production build, a host-only dependency that the exposed modules reach only through a dynamic import() is not fetched while the remote initializes. It is loaded from the host's provider when that import() runs, before the imported chunk evaluates. A dependency imported statically by an exposed module, or configured with eager: true, is still loaded during initialization.

Shared dependencies installed in several places

An absolute import that resolves inside a different node_modules directory than the one the share itself resolves to, for example a workspace package with its own nested copy, is not treated as the shared module by default. Set allowNodeModulesSuffixMatch: true on the share to match it by the path after node_modules/, as webpack and rspack do with the same option:

The Host Application configuration

file host/vite.config.ts

The host app configuration specifies its name, the filename of its exposed remote entry remoteEntry.js, and importantly, the configuration of the remote application to load. Object remotes that omit type retain the legacy "var" default and emit a warning. Use type: "module" for Vite ESM remotes. Use type: "var" explicitly only for global-format remotes, such as Webpack/Rspack remotes or a Vite remote's varFilename output. You can specify the place the host initialization file is injected with the hostInitInjectLocation option, which is described in the example code above. The moduleParseTimeout option allows you to configure the maximum time to wait for module parsing during the build process. The moduleParseIdleTimeout option is an alternative that resets the timer on every parsed module. It only fires when there has been no module activity for the configured duration, making it suitable for large codebases where the total build time exceeds the fixed timeout.

SSR entry loading strategy

SSR hosts can choose how HTTP ESM remote entries are evaluated during build and preview:

• "temp-file" (default) fetches the remote graph, rewrites imports to host-resolved shared packages, writes temporary files, and loads them with import(). • "vm" evaluates the graph in memory with vm.SourceTextModule and resolves shared packages through the Module Federation share scope.

The "vm" strategy requires Node.js to run with --experimental-vm-modules. When unavailable, the loader warns once and falls back to "temp-file". Vite 8 development uses ModuleRunner; this option primarily affects build and preview SSR entry loading.

ssrEntryLoader also accepts network and cache options:

With maxAgeMs, a remote redeployed at the same URL is picked up once its manifest version changes. Only manifest-resolved entries can be revalidated.…

Description from the npm listing.