Vite Gains Full Module Federation 2.0 Support – What It Means for Frontend Development

Module Federation arrives in Vite

Module Federation is an established technique for runtime composition of front‑end applications. Historically it was only available through a Webpack plugin, causing many teams to stay with Webpack because the Vite ecosystem lacked this capability. The Vite team now officially promotes Module Federation 2.0 and recommends the module-federation/vite package, turning Module Federation into a generic front‑end infrastructure rather than a Webpack‑only feature.

Definition

Module Federation enables multiple front‑end applications to be dynamically composed at runtime and to share dependencies.

Problems addressed

Component reuse via npm packages – publishing is slow and version management is complex.

Multi‑application integration via iframes – poor user experience and complicated communication.

Dependency sharing with externals/DLL – configuration is intricate and maintenance cost is high.

Core concepts

Host – the application that consumes remote modules.

Remote – the application that exposes modules.

Shared – dependencies (e.g., React, Vue) shared across apps.

Host (main app)
   ↓ dynamic load
Remote A
Remote B

An application can act as both Host and Remote.

Core capabilities

Dynamic module loading

import("remote/Button")

Remote code is used like a local module.

Dependency sharing

shared: { react: { singleton: true } }

All apps share the same React instance.

Independent deployment

Remote apps can be released separately.

The host does not need to be rebuilt.

This enables true front‑end micro‑services.

Typical scenarios

Micro‑frontend architecture – large systems split by domain (user, order, product).

Remote component reuse – UI libraries loaded on demand without npm publishing.

Plugin‑based systems – on‑demand feature modules supporting A/B testing.

Progressive refactoring – gradually replace legacy systems with new modules.

Module Federation 2.0 – key changes

1. From Webpack plugin to independent runtime + protocol

Before: MF = Webpack plugin Now:

MF = independent runtime + protocol

2. Decoupled from build tools

Supported by Vite, Rspack, Rollup (indirectly) and future bundler‑less environments, removing the hard dependency on Webpack.

3. New capabilities

Manifest support

Runtime decoupling

Plugin system

DevTools

TypeScript support

4. Core insight

The essential part of Module Federation resides in the runtime, not the bundler. Consequently the official effort focuses on module-federation/vite rather than re‑implementing MF inside other bundlers.

How to use module-federation/vite

Installation

npm install @module-federation/vite

Remote (child app) configuration

import { federation } from "@module-federation/vite";
export default {
  plugins: [
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: { "./App": "./src/App.vue" },
      shared: ["vue"]
    })
  ]
};

Host (main app) configuration

import { federation } from "@module-federation/vite";
export default {
  plugins: [
    federation({
      name: "host_app",
      remotes: {
        remote: {
          type: "module",
          entry: "http://localhost:5001/remoteEntry.js"
        }
      },
      shared: ["vue"]
    })
  ]
};

Using a remote module

import("remote/App");

The remote module can be imported exactly like a local one.

Reference

GitHub repository:

https://github.com/module-federation/vite