Vue Academy · Lesson

Webpack Module Federation with Vue

ModuleFederationPlugin, exposes, remotes, shared dependencies, remote component loading.

Lesson 2 of 413 steps

Webpack Module Federation with Vue is a free Vue Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

Module Federation in Webpack

Webpack 5 ships Module Federation built in. It lets a build expose modules to other builds and consume modules from them at runtime — the foundation for run-time micro-frontends.

Hosts and Remotes

Two roles: a remote exposes components, and a host consumes them. An app can be both. A host loads a remote’s code over HTTP at runtime, not at build time.

The ModuleFederationPlugin

You configure federation by adding ModuleFederationPlugin to your webpack plugins array. Its options define name, what you expose, what you consume, and shared deps.

const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
    }),
  ],
}

The name Option

name is the unique global identifier of this build. Hosts reference a remote by this name.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
})

The exposes Option (Remote)

A remote lists the modules it shares in exposes. Keys are public paths; values are local file paths.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
  exposes: {
    "./CartButton": "./src/components/CartButton.vue",
  },
})

The remoteEntry Manifest

A remote builds a remoteEntry.js manifest describing its exposed modules. Hosts load this file to discover and fetch the remote’s code at runtime.

// host loads: https://checkout.example.com/remoteEntry.js

The remotes Option (Host)

A host declares which remotes it consumes in remotes, mapping a local alias to the remote’s name plus its remoteEntry.js URL.

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    checkout: "checkout@https://checkout.example.com/remoteEntry.js",
  },
})

The shared Option

shared lists dependencies both sides should share to avoid loading two copies. For a framework like Vue you must share it so all micro-frontends use one instance.

new ModuleFederationPlugin({
  name: "shell",
  remotes: { /* ... */ },
  shared: ["vue"],
})

singleton: true for Vue

Vue must be a singleton — exactly one copy in the page. Two Vue instances break reactivity and component identity. Mark it singleton with a version requirement.

shared: {
  vue: {
    singleton: true,
    requiredVersion: "^3.4.0",
  },
}

Consuming a Remote Component

Import the remote module dynamically at runtime. Because it loads over the network, use a dynamic import() — typically wrapped in defineAsyncComponent in Vue.

import { defineAsyncComponent } from "vue"

const CartButton = defineAsyncComponent(() =>
  import("checkout/CartButton")
)

Rendering the Remote

Use the async component like any other in your template. Webpack fetches the remote’s code on first render and caches it.

<template>
  <header>
    <CartButton />
  </header>
</template>

Quick Check

Check your understanding of Module Federation with Vue.

Answer it in the interactive lesson

Recap

You learned Webpack Module Federation:

ModuleFederationPlugin configures federation; name identifies the build.
A remote lists exposes and emits a remoteEntry.js manifest.
A host lists remotes mapping an alias to name@URL/remoteEntry.js.
shared prevents duplicate deps; Vue needs singleton: true.
Consume a remote via dynamic import("remote/Module"), often with defineAsyncComponent.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “Webpack Module Federation with Vue” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Webpack Module Federation with Vue”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

What will I learn in “Webpack Module Federation with Vue”?

ModuleFederationPlugin, exposes, remotes, shared dependencies, remote component loading. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “Webpack Module Federation with Vue” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy