> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/nrwl/nx/llms.txt
> Use this file to discover all available pages before exploring further.
# @nx/vite
> The Vite plugin for Nx provides generators and executors for building and testing applications using Vite and Vitest.
The `@nx/vite` plugin integrates Vite and Vitest into your Nx workspace. It can infer `build`, `serve`, `test`, and `preview` targets automatically from `vite.config.ts`, and provides generators to add Vite configuration to existing projects.
## Installation
```bash theme={null}
nx add @nx/vite
```
Or install manually:
```bash npm theme={null}
npm install --save-dev @nx/vite
```
```bash pnpm theme={null}
pnpm add --save-dev @nx/vite
```
```bash yarn theme={null}
yarn add --dev @nx/vite
```
`@nx/vite` requires `vite` (^5, ^6, ^7, or ^8) and `vitest` (^1.3.1, ^2, ^3, or ^4) as peer dependencies.
## What the plugin provides
Add Vite or Vitest configuration to existing projects. Set up TypeScript path aliases for workspace libraries.
Build with Vite, serve with the Vite dev server, test with Vitest, and preview production builds.
Automatically detects `vite.config.ts` files and infers build, serve, test, and preview targets without any manual configuration.
## Generators
### configuration
Add Vite configuration to an existing project. This is the primary generator for migrating a project to use Vite.
```bash theme={null}
nx generate @nx/vite:configuration myapp
```
Specify the UI framework:
```bash theme={null}
# React
nx generate @nx/vite:configuration myapp --uiFramework=react
# None (vanilla JS/TS)
nx generate @nx/vite:configuration myapp --uiFramework=none
```
Include Vitest setup:
```bash theme={null}
nx generate @nx/vite:configuration myapp --includeVitest
```
### vitest
Add a Vitest configuration to an existing project without adding a full Vite build setup.
```bash theme={null}
nx generate @nx/vite:vitest --project=mylib
```
### setup-paths-plugin
Add the `nxViteTsPaths` plugin to an existing `vite.config.ts` to enable TypeScript path aliases for workspace libraries.
```bash theme={null}
nx generate @nx/vite:setup-paths-plugin --project=myapp
```
### convert-to-inferred
Migrate existing projects that use `@nx/vite:build` or `@nx/vite:test` executors to use the inferred task plugin instead.
```bash theme={null}
nx generate @nx/vite:convert-to-inferred
# Migrate a single project
nx generate @nx/vite:convert-to-inferred --project=myapp
```
## Executors
### build
Build a project using Vite. Runs `vite build` under the hood.
```json theme={null}
{
"targets": {
"build": {
"executor": "@nx/vite:build",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/myapp"
},
"configurations": {
"production": {
"mode": "production"
}
}
}
}
}
```
```bash theme={null}
nx build myapp
```
### dev-server
Start the Vite development server with hot module replacement.
```json theme={null}
{
"targets": {
"serve": {
"executor": "@nx/vite:dev-server",
"options": {
"buildTarget": "myapp:build"
}
}
}
}
```
```bash theme={null}
nx serve myapp
```
### test
Run unit tests using Vitest.
```json theme={null}
{
"targets": {
"test": {
"executor": "@nx/vite:test",
"options": {
"passWithNoTests": true
}
}
}
}
```
```bash theme={null}
nx test myapp
```
### preview-server
Preview the production build locally using Vite's preview server.
```json theme={null}
{
"targets": {
"preview": {
"executor": "@nx/vite:preview-server",
"options": {
"buildTarget": "myapp:build"
}
}
}
}
```
```bash theme={null}
nx preview myapp
```
## Inferred tasks
When `@nx/vite/plugin` is registered in `nx.json`, Nx scans for `vite.config.ts` (or `.js`, `.mts`, `.mjs`) files and automatically infers targets from them. No `project.json` target configuration is needed.
```json theme={null}
{
"plugins": [
{
"plugin": "@nx/vite/plugin",
"options": {
"buildTargetName": "build",
"testTargetName": "test",
"serveTargetName": "serve",
"previewTargetName": "preview",
"serveStaticTargetName": "serve-static"
}
}
]
}
```
Inferred tasks read their configuration directly from `vite.config.ts`. Options like `outputPath`, `port`, and `mode` are picked up from the config file rather than `project.json`.
## Configuration examples
### vite.config.ts for a React app
```typescript theme={null}
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
export default defineConfig({
root: __dirname,
cacheDir: '../../node_modules/.vite/myapp',
server: {
port: 4200,
host: 'localhost',
},
preview: {
port: 4300,
host: 'localhost',
},
plugins: [react(), nxViteTsPaths()],
build: {
outDir: '../../dist/myapp',
emptyOutDir: true,
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true,
},
},
});
```
### vite.config.ts with Vitest
```typescript theme={null}
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
export default defineConfig({
plugins: [react(), nxViteTsPaths()],
test: {
globals: true,
cache: {
dir: '../../node_modules/.vitest/myapp',
},
environment: 'jsdom',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
reporters: ['default'],
coverage: {
reportsDirectory: '../../coverage/myapp',
provider: 'v8',
},
},
});
```
## TypeScript path aliases
The `nxViteTsPaths` plugin reads your `tsconfig.base.json` path aliases and applies them to the Vite build, enabling imports like `@myorg/mylib` to resolve correctly without manual alias configuration.
```typescript theme={null}
import { myUtil } from '@myorg/shared-utils';
```