@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

nx add @nx/vite

Or install manually:

npm

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';