# Vite
- Can build modules that meet the `Module Federation` loading specifications.
- Can consume modules that adhere to the `Module Federation` specifications using aliases.
- Can configure shared dependencies for modules, so that when the host environment of the loaded module already has the corresponding dependency, it will not be loaded again.
- When a module has remote types, it automatically downloads and consumes the remote types.
:::warning Unsupported Options
Except for the [dev](/configure/dev.md) option, all options are supported.
:::
- roadmap 🗓️
- Consuming remote modules will have hot update capabilities.
- nuxt ssr
## Quick Start
### Installation
You can install the plugin with the following commands:
```sh [npm]
npm add @module-federation/vite --save
```
```sh [yarn]
yarn add @module-federation/vite --save
```
```sh [pnpm]
pnpm add @module-federation/vite --save
```
```sh [bun]
bun add @module-federation/vite --save
```
### Register the Plugin
In `Vite`, you can add the plugin through the `plugins` configuration item in the `vite.config.js` file:
```ts title='vite.config.js'
import { federation } from '@module-federation/vite';
module.exports = {
server: {
origin: 'http://localhost:2000',
port: 2000,
},
base: "http://localhost:2000",
plugins: [
federation({
name: 'vite_provider',
manifest: true,
remotes: {
esm_remote: {
type: "module",
name: "esm_remote",
entry: "https://[...]/remoteEntry.js",
},
var_remote: "var_remote@https://[...]/remoteEntry.js",
},
exposes: {
'./button': './src/components/button',
},
shared: {
react: {
singleton: true,
},
'react/': {
singleton: true,
},
},
}),
],
// Do you need to support build targets lower than chrome89?
// You can use 'vite-plugin-top-level-await' plugin for that.
build: {
target: 'chrome89',
},
};
```
## Configure the Build Plugin
- Type: `ModuleFederationPlugin(options: ModuleFederationOptions)`
- The configuration structure for the Module Federation plugin is as follows:
```ts
type ModuleFederationOptions = {
name: string;
filename?: string;
remotes?: Array<RemoteInfo>;
shared?: ShareInfos;
};
```
You can find detailed explanations of all configuration items on the [Configuration Overview](/configure/index.md) page.
