# @originjs/vite-plugin-federation > A Vite plugin which support Module Federation. Latest version **1.4.1** (published 2025-04-12) · MulanPSL-2.0 license · 0 weekly downloads ## Install ```sh npm install @originjs/vite-plugin-federation pnpm add @originjs/vite-plugin-federation yarn add @originjs/vite-plugin-federation bun add @originjs/vite-plugin-federation ``` ## Health **Score 35/100 (D)** — status: maintenance-mode. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.4.1 | | Published | 2025-04-12 | | First published | 2021-08-26 | | Weekly downloads | 0 | | License | MulanPSL-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=14.0.0 | | Dependencies | 2 | | Unpacked size | 185.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 3047 | | Author | @originjs | | Maintainers | flyfishzy, alan_scut, yuangongji, peteralfredlee, jiawulin | | Keywords | vite, plugins | ## Links - npm: https://www.npmjs.com/package/@originjs/vite-plugin-federation - Repository: https://github.com/originjs/vite-plugin-federation - Homepage: https://github.com/originjs/vite-plugin-federation#readme - Issues: https://github.com/originjs/vite-plugin-federation/issues - npm.io page: https://npm.io/package/@originjs/vite-plugin-federation ## Dependencies (2) - [magic-string](https://npm.io/package/magic-string.md) ^0.27.0 - [estree-walker](https://npm.io/package/estree-walker.md) ^3.0.2 ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 1.4.1 (latest) — 2025-04-12 - 1.4.0 — 2025-03-15 - 1.3.9 — 2025-01-18 - 1.3.8 — 2025-01-11 - 1.3.7 — 2025-01-01 - 1.3.6 — 2024-09-15 - 1.3.5 — 2024-02-18 - 1.3.4 — 2024-01-19 - 1.3.3 — 2023-11-21 - 1.3.2 — 2023-09-28 - 1.3.1 — 2023-09-13 - 1.2.3 — 2023-05-19 - 1.2.2 — 2023-04-08 - 1.2.1 — 2023-02-18 - 1.2.0 — 2023-02-11 - … 27 more at https://npm.io/package/@originjs/vite-plugin-federation/versions ## README # vite-plugin-federation A Vite/Rollup plugin which support Module Federation. Inspired by Webpack and compatible with [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/). ## Install ``` npm install @originjs/vite-plugin-federation --save-dev ``` or ``` yarn add @originjs/vite-plugin-federation --dev ``` ## Usage Using the `Module Federation` usually requires more than 2 projects, one as the `host side` and one as the `remote side`. #### Step 1: Configure the remote side. - for a vite project, modify `vite.config.js`: ```js // vite.config.js import federation from "@originjs/vite-plugin-federation"; export default { plugins: [ federation({ name: 'remote-app', filename: 'remoteEntry.js', // Modules to expose exposes: { './Button': './src/Button.vue', }, shared: ['vue'] }) ] } ``` - for a rollup project, modify `rollup.config.js`: ```js // rollup.config.js import federation from '@originjs/vite-plugin-federation' export default { input: 'src/index.js', plugins: [ federation({ name: 'remote-app', filename: 'remoteEntry.js', // Modules to expose exposes: { './Button': './src/button'. }, shared: ['vue'] }) ] } ``` #### Step 2: Configure the host side - for a vite project, modify `vite.config.js`: ```js // vite.config.js import federation from "@originjs/vite-plugin-federation"; export default { plugins: [ federation({ name: 'host-app', remotes: { remote_app: "http://localhost:5001/assets/remoteEntry.js", }, shared: ['vue'] }) ] } ``` - for a rollup project, modify `rollup.config.js`: ```js // rollup.config.js import federation from '@originjs/vite-plugin-federation' export default { input: 'src/index.js', plugins: [ federation({ name: 'host-app', remotes: { remote_app: "http://localhost:5001/remoteEntry.js", }, shared: ['vue'] }) ] } ``` #### Step 3: Using remote modules on the host side Using a Vue project as an example ```js import { createApp, defineAsyncComponent } from "vue"; const app = createApp(Layout); ... const RemoteButton = defineAsyncComponent(() => import("remote_app/Button")); app.component("RemoteButton", RemoteButton); app.mount("#root"); ``` Using remote components in templates ```vue ``` ## Example projects | Examples | Host | Remote | | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------------------------------- | | [basic-host-remote](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/basic-host-remote) | `rollup`+`esm` | `rollup`+`esm` | | [react-in-vue](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/react-in-vue) | `vite`+`esm` | `vite`+`esm` | | [simple-react-esm](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/simple-react-esm) | `rollup`+`esm` | `rollup`+`esm` | | [simple-react-systemjs](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/simple-react-systemjs) | `rollup`+`systemjs` | `rollup`+`systemjs` | | [simple-react-webpack](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/simple-react-webpack) | `rollup`+`systemjs` | `webpack`+`systemjs` | | [vue2-demo](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue2-demo) | `vite`+`esm` | `vite`+`esm` | | [vue3-advanced-demo](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-advanced-demo) | `vite`+`esm` 
`vue-router`/`pinia` | `vite`+`esm`
`vue-router`/`pinia` | | [vue3-demo-esm](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-esm) | `vite`+`esm` | `vite`+`esm` | | [vue3-demo-systemjs](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-systemjs) | `vite`+`systemjs` | `vite`+`systemjs` | | [vue3-demo-webpack-esm-esm](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-webpack-esm-esm) | `vite/webpack`+`esm` | `vite/webpack`+`esm` | | [vue3-demo-webpack-esm-var](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-webpack-esm-var) | `vite`+`esm` | `webpack`+`var` | | [vue3-demo-webpack-systemjs](https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/vue3-demo-webpack-systemjs) | `vite`+`systemjs` | `webpack`+`systemjs` | --- _Source: https://npm.io/package/@originjs/vite-plugin-federation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._