vite-plugin-federation

A Vite plugin which support Module Federation. Inspired by Webpack Module Federation feature.

Install

Using npm:

npm install @dilesoft/vite-plugin-federation-dynamic --save-dev

Usage

• for a Vite project, in vite.config.js:

import { defineConfig } from 'vite'
import federation from "@dilesoft/vite-plugin-federation-dynamic";

export default defineConfig({
  plugins: [
    federation({
      name: 'module-name',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button.vue',
      },
      remotes:{
          foo: 'remote_foo'
      },
      shared: ['vue']
    })
  ],
})

• for a Rollup project, in rollup.config.js:

import federation from '@dilesoft/vite-plugin-federation-dynamic'

export default {
  input: 'src/index.js',
  output: {
    format: 'esm',
    dir: 'dist'
  },
  plugins: [
    federation({
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/button'
      },
      shared: ['react']
    })
  ]
}

Examples

• basic-host-remote
• simple-react
• vue3-demo