Vue Academy · Lesson

Webpack Module Federation with Vue

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

Webpack Module Federation with Vue is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

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

Yes — the full text of “Webpack Module Federation with Vue” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

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