Skip to main content

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.

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

nx add @nx/vite
Or install manually: 
npm install --save-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

Generators

Add Vite or Vitest configuration to existing projects. Set up TypeScript path aliases for workspace libraries.

Executors

Build with Vite, serve with the Vite dev server, test with Vitest, and preview production builds.

Inferred tasks

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. 
nx generate @nx/vite:configuration myapp
Specify the UI framework: 
# React
nx generate @nx/vite:configuration myapp --uiFramework=react

# None (vanilla JS/TS)
nx generate @nx/vite:configuration myapp --uiFramework=none
Include Vitest setup: 
nx generate @nx/vite:configuration myapp --includeVitest

​
vitest

Add a Vitest configuration to an existing project without adding a full Vite build setup. 
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. 
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. 
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. 
{
  "targets": {
    "build": {
      "executor": "@nx/vite:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/myapp"
      },
      "configurations": {
        "production": {
          "mode": "production"
        }
      }
    }
  }
}

nx build myapp

​
dev-server

Start the Vite development server with hot module replacement. 
{
  "targets": {
    "serve": {
      "executor": "@nx/vite:dev-server",
      "options": {
        "buildTarget": "myapp:build"
      }
    }
  }
}

nx serve myapp

​
test

Run unit tests using Vitest. 
{
  "targets": {
    "test": {
      "executor": "@nx/vite:test",
      "options": {
        "passWithNoTests": true
      }
    }
  }
}

nx test myapp

​
preview-server

Preview the production build locally using Vite’s preview server. 
{
  "targets": {
    "preview": {
      "executor": "@nx/vite:preview-server",
      "options": {
        "buildTarget": "myapp:build"
      }
    }
  }
}

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. 
{
  "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

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

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. 
import { myUtil } from '@myorg/shared-utils';

Build docs developers (and LLMs) love

Get started for freeTalk to us