Overview of the Nx Vite Plugin

Vite is a fast build tool and dev server for modern web apps.

The @nx/vite plugin adds inferred targets and project configuration generators.

Vitest is now in @nx/vitest

Starting with Nx v22, Vitest support has moved to the dedicated @nx/vitest plugin. In Nx v21 and prior, @nx/vite contained what is now in @nx/vitest. If you are upgrading, see the migration guide.

You can use Vite with Nx without the plugin and still get task caching, task orchestration, and the project graph.

Setup

Add to an existing workspace

Keep Nx Package Versions In Sync

Make sure to install the @nx/vite version that matches the version of nx in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can fix Nx version mismatches with this recipe. Using nx add helps ensure the correct version is installed and configured.

Install the plugin:

nx add @nx/vite

Configure an existing project to use Vite:

nx g @nx/vite:configuration --project=my-app

Verify inferred tasks in the project details view:

nx show project my-app --web

Replace my-app with your project name.

Create a new workspace

Use a framework preset and keep the setup minimal:

React

npx create-nx-workspace@latest --preset=react-standalone --bundler=vite

Web

npx create-nx-workspace@latest --preset=web-components --bundler=vite

For the full framework workflows, see the React introduction or Web app reference.

Local Development

• nx dev my-app starts the Vite dev server for the project (same as the deprecated serve target).
• nx build my-app creates a production build in dist/ (controlled by build.outDir in vite.config.*) and registers the outputs for Nx caching.
• nx preview my-app serves the production build using Vite preview (runs after build).
• nx serve-static my-app serves the built assets from dist/ for quick smoke tests.
• nx typecheck my-app runs TypeScript typechecking when a tsconfig*.json exists in the project.

Replace my-app with your project name.

Configuration

Configure Task Inference

The @nx/vite plugin infers tasks by reading Vite config files. Any of the following config files will be picked up:

• vite.config.js
• vite.config.ts
• vite.config.mjs
• vite.config.mts
• vite.config.cjs
• vite.config.cts

Build targets are only created when the project is buildable. A project is treated as buildable when any of the following are true:

• build.lib is set in vite.config.*
• build.rollupOptions.input is set
• builder.buildApp is set
• an index.html file exists at the project root

Dev, preview, and serve-static targets are created for buildable projects. If you are in library mode (build.lib), these targets are skipped unless you explicitly configure a dev server (e.g. server.host or server.port).

Typecheck targets are created when a tsconfig*.json file exists in the project.

Plugin Options

Configure @nx/vite/plugin in the plugins array in nx.json:

nx.json

{
  "plugins": [
    {
      "plugin": "@nx/vite/plugin",
      "options": {
        "buildTargetName": "build",
        "previewTargetName": "preview",
        "serveTargetName": "serve",
        "devTargetName": "dev",
        "serveStaticTargetName": "serve-static",
        "typecheckTargetName": "typecheck",
        "buildDepsTargetName": "build-deps",
        "watchDepsTargetName": "watch-deps"
      }
    }
  ]
}

serveTargetName is deprecated; use devTargetName instead. buildDepsTargetName and watchDepsTargetName create targets that build or watch project dependencies.

Option	Description	Default
buildTargetName	Name of the Vite build target	build
previewTargetName	Name of the Vite preview target	preview
serveTargetName	Name of the deprecated Vite serve target	serve
devTargetName	Name of the Vite dev server target	dev
serveStaticTargetName	Name of the static file server target	serve-static
typecheckTargetName	Name of the typecheck target	typecheck
buildDepsTargetName	Name of the build-deps target for dependency builds	none
watchDepsTargetName	Name of the watch-deps target for dependency watches	none

Disable or Scope Inference

To stop inference for a specific project, exclude its config file with include/exclude filters in nx.json:

nx.json

{
  "plugins": [
    {
      "plugin": "@nx/vite/plugin",
      "exclude": ["apps/legacy/**"]
    }
  ]
}

To avoid specific targets, adjust the config files that trigger them. For example, remove tsconfig*.json to stop typecheck, or use library mode (build.lib) to skip dev, preview, and serve-static unless you set dev server options.

View Inferred Tasks

To see what tasks Nx inferred for a project, open the project details view in Nx Console or run:

nx show project my-app --web

CI and Scale

Use Nx to keep CI fast in large monorepos:

• Run only affected Vite projects: nx affected -t build,typecheck.
• Enable remote caching with Nx Cloud using nx connect.
• Follow the CI setup guide for a full pipeline.

What's Next

Configure Vite Set up Vite config, Nx-specific plugins, and recommended defaults.

React with Nx Learn the React workflow in an Nx monorepo and how Vite fits.

Vue with Nx See the Vue workflow in Nx and where Vite is used.

Vitest with Nx Add and run Vitest tests, including CI-friendly patterns.

Vite Generators Browse all Vite generator options for configuration and testing.

Vite Executors Browse all Vite executor options for dev and build.