Skip to content
Nx – Left-click: Home. Right-click: Brands.NxDocs

Main navigation

Blog
Remote CacheNx CloudPricing
Enterprise
Try Nx Cloud for free
NxCIExtending NxPluginsChangelogAI Chat
Community channelLatest newsLatest news on BlueskyYoutube channelNx on LinkedInNx is open source, check the code on GitHub
  • Getting Started
    • Introduction
    • Installation
    • Start a new project
    • Add to existing project
    • Editor Integration
    • AI Integration
    • Tutorials
      • TypeScript Monorepo
      • React Monorepo
      • Angular Monorepo
      • Gradle Monorepo
    Features
    • Run Tasks
    • Cache Task Results
    • Enhance Your LLM
    • Explore Your Workspace
    • Generate Code
    • Maintain TypeScript Monorepos
    • Automate Updating Dependencies
    • Enforce Module Boundaries
    • Manage Releases
    • CI Features
      • Run Only Tasks Affected by a PR
      • Use Remote Caching (Nx Replay)
      • Distribute Task Execution (Nx Agents)
      • Dynamically Allocate Agents
      • Automatically Split E2E Tasks
      • Identify and Re-run Flaky Tasks
    Core Guides
    • Installation
      • Install Nx in a Non-Javascript Repo
      • Update Your Global Nx Installation
    • Tasks & Caching
      • Configure Inputs for Task Caching
      • Configure Outputs for Task Caching
      • Define a Task Pipeline
      • Use the Terminal UI
      • Run Custom Commands
      • Pass Args to Commands
      • Run Tasks in Parallel
      • Run Root-Level NPM Scripts with Nx
      • Workspace Watching
      • Reduce Repetitive Configuration
      • Change Cache Location
      • Skip Task Caching
      • Migrate to Inferred Tasks (Project Crystal)
      • Self-Host the Remote Cache
    • Adopting Nx
      • NPM/Yarn/PNPM workspaces
      • Migrate From Turborepo
      • Add to any Project
      • Import an Existing Project into an Nx Workspace
      • Preserving Git Histories
      • Manual migration
    • Nx Release
      • Get Started with Nx Release
      • Release Projects Independently
      • Updating Version References in Manifest Files (e.g. package.json)
      • Automatically Version with Conventional Commits
      • Customize Conventional Commit Types
      • File Based Versioning (Version Plans)
      • Configure Custom Registries
      • Publish in CI/CD
      • Automate GitHub Releases
      • Automate GitLab Releases
      • Publish Rust Crates
      • Update Your Local Registry Setup to use Nx Release
      • Configure Changelog Format
      • Build Before Versioning
      • Configuring Version Prefix for Dependency Versions
    • Nx Console
      • Telemetry
      • Project Details View
      • Generate Command
      • Run Command
      • Nx Cloud Integration
      • Migrate UI
      • Troubleshooting
    • Enforce Module Boundaries
      • Ban Dependencies with Certain Tags
      • Tag in Multiple Dimensions
      • Ban External Imports
      • Tags Allow List
    • Tips and tricks
      • Convert from a Standalone Repository to a Monorepo
      • Keep Nx Versions in Sync
      • Define Environment Variables
      • Configuring Browser Support
      • Include Assets in Build
      • Include All package.json Files as Projects
      • Identify Dependencies Between Folders
      • Disable Graph Links Created from Analyzing Source Files
      • Altering Migration Process
      • Using Yarn PnP
    Core Concepts
    • Mental Model
    • How Caching Works
    • What is a Task Pipeline
    • What Are Nx Plugins
    • Inferred Tasks
    • Types of Configuration
    • Executors and Configurations
    • Common Tasks
    • Nx Daemon
    • Sync Generators
    • TypeScript Project Linking
    • Buildable and Publishable Libraries
    • Organizational Decisions
      • Overview
      • Monorepos
      • Dependency Management
      • Code Ownership
      • Project Size
      • Project Dependency Rules
      • Folder Structure
    Technologies
    • TypeScript illustration
      TypeScript
      • Introduction
      • Guides
        • Switch to Workspaces and TS Project References
        • Enable Typescript Batch Mode
        • Define Secondary Entrypoints for Typescript Packages
        • Compile Typescript Packages to Multiple Formats
        • Use JavaScript instead TypeScript
      • API
        • executors
          • copy-workspace-modules
          • tsc
          • swc
          • node
          • release-publish
          • verdaccio
        • generators
          • library
          • init
          • convert-to-swc
          • release-version
          • setup-verdaccio
          • setup-build
          • typescript-sync
          • setup-prettier
        • migrations
    • Angular illustration
      Angular
      • Introduction
      • Migration
        • Migrating from Angular CLI
        • Migrating From Multiple Angular CLI Repos
      • Guides
        • Use Environment Variables in Angular
        • Using Tailwind CSS with Angular projects
        • Setup Module Federation with SSR for Angular
        • Advanced Micro Frontends with Angular using Dynamic Federation
        • Setup incremental builds for Angular applications
        • Nx and the Angular CLI
        • Nx Devkit and Angular Devkit
        • Angular and Nx Version Matrix
      • API
        • executors
          • delegate-build
          • ng-packagr-lite
          • package
          • browser-esbuild
          • module-federation-dev-server
          • module-federation-dev-ssr
          • application
          • extract-i18n
          • webpack-browser
          • dev-server
          • webpack-server
        • generators
          • add-linting
          • application
          • component
          • component-story
          • component-test
          • convert-to-application-executor
          • convert-to-rspack
          • directive
          • federate-module
          • init
          • library
          • library-secondary-entry-point
          • remote
          • move
          • convert-to-with-mf
          • host
          • ng-add
          • ngrx
          • ngrx-feature-store
          • ngrx-root-store
          • pipe
          • scam-to-standalone
          • scam
          • scam-directive
          • scam-pipe
          • setup-mf
          • setup-ssr
          • setup-tailwind
          • stories
          • storybook-configuration
          • cypress-component-configuration
          • web-worker
        • migrations
      • Angular Rspack
        • Introduction
        • Guides
          • Getting Started with Angular and Rspack
          • Migrate from Angular Webpack
          • Handling Configurations
          • Internationalization (i18n)
        • API
          • Create Config
          • Create Server
      • Angular Rsbuild
        • API
          • Create Config
          • Create Server
    • React illustration
      React
      • Introduction
      • Guides
        • React Native with Nx
        • Remix with Nx
        • React Router with Nx
        • Use Environment Variables in React
        • Using Tailwind CSS in React
        • Adding Images, Fonts, and Files
        • Setup Module Federation with SSR for React
        • Deploying Next.js applications to Vercel
        • React Compiler with Nx
      • API
        • executors
          • module-federation-dev-server
          • module-federation-ssr-dev-server
          • module-federation-static-server
        • generators
          • init
          • application
          • library
          • component
          • redux
          • storybook-configuration
          • component-story
          • stories
          • hook
          • host
          • remote
          • cypress-component-configuration
          • component-test
          • setup-tailwind
          • setup-ssr
          • federate-module
        • migrations
      • Next
        • Introduction
        • Guides
          • How to configure Next.js plugins
        • API
          • executors
            • build
            • server
          • generators
            • init
            • application
            • page
            • component
            • library
            • custom-server
            • cypress-component-configuration
            • convert-to-inferred
          • migrations
      • Remix
        • Introduction
        • Guides
        • API
          • executors
            • serve
            • build
          • generators
            • preset
            • setup
            • application
            • cypress-component-configuration
            • library
            • init
            • route
            • resource-route
            • action
            • loader
            • style
            • setup-tailwind
            • storybook-configuration
            • meta
            • error-boundary
            • convert-to-inferred
          • migrations
      • React Native
        • Introduction
        • Guides
        • API
          • executors
            • run-android
            • run-ios
            • bundle
            • build-android
            • build-ios
            • start
            • sync-deps
            • ensure-symlink
            • storybook
            • pod-install
            • upgrade
          • generators
            • init
            • application
            • library
            • component
            • upgrade-native
            • web-configuration
            • convert-to-inferred
          • migrations
      • Expo
        • Introduction
        • Guides
        • API
          • executors
            • update
            • build
            • build-list
            • run
            • start
            • sync-deps
            • ensure-symlink
            • prebuild
            • install
            • export
            • submit
            • serve
          • generators
            • init
            • application
            • library
            • component
            • convert-to-inferred
          • migrations
    • Vue illustration
      Vue
      • Introduction
      • API
        • generators
          • init
          • application
          • library
          • component
          • setup-tailwind
          • storybook-configuration
          • stories
        • migrations
      • Nuxt
        • Introduction
        • Guides
          • Deploying Nuxt applications to Vercel
        • API
          • generators
            • init
            • application
            • storybook-configuration
          • migrations
    • Node.js illustration
      Node.js
      • Introduction
      • Guides
        • Deploying a Node App to Fly.io
        • Add and Deploy Netlify Edge Functions with Node
        • Deploying AWS lambda in Node.js (deprecated)
        • Set Up Application Proxies
        • Wait for Tasks to Finish
      • API
        • generators
          • init
          • application
          • library
          • setup-docker
        • migrations
      • Express
        • Introduction
        • API
          • generators
            • init
            • application
      • Nest
        • Introduction
        • API
          • generators
            • application
            • init
            • library
            • class
            • controller
            • decorator
            • filter
            • gateway
            • guard
            • interceptor
            • interface
            • middleware
            • module
            • pipe
            • provider
            • resolver
            • resource
            • service
          • migrations
    • Java illustration
      Java
      • Introduction
      • API
        • executors
          • gradle
        • generators
          • init
          • ci-workflow
        • migrations
    • Module Federation illustration
      Module Federation
      • Introduction
      • Concepts
        • Module Federation and Nx
        • Nx Module Federation Technical Overview
        • Faster Builds with Module Federation
        • Micro Frontend Architecture
        • Manage Library Versions with Module Federation
      • Guides
        • How to create a Module Federation Host Application
        • How to create a Module Federation Remote Application
        • How to Federate a Module
        • NxModuleFederationPlugin
        • NxModuleFederationDevServerPlugin
      • API
        • migrations
    • ESLint illustration
      ESLint
      • Introduction
      • Guides
        • Configuring ESLint with Typescript
        • Switching to ESLint's flat config format
      • API
        • executors
          • lint
        • generators
          • init
          • workspace-rules-project
          • workspace-rule
          • convert-to-flat-config
          • convert-to-inferred
        • migrations
      • ESLint Plugin
        • Guides
          • The enforce-module-boundaries rule
          • The dependency-checks rule
        • API
          • migrations
    • Build Tools illustration
      Build Tools
      • Webpack
        • Introduction
        • Guides
          • How to configure Webpack in your Nx workspace
          • Webpack plugins
        • API
          • executors
            • webpack
            • dev-server
            • ssr-dev-server
          • generators
            • init
            • configuration
            • convert-config-to-webpack-plugin
            • convert-to-inferred
          • migrations
      • Vite
        • Introduction
        • Guides
          • Configure Vite on your Nx workspace
        • API
          • executors
            • dev-server
            • build
            • test
            • preview-server
          • generators
            • init
            • configuration
            • setup-paths-plugin
            • convert-to-inferred
            • vitest
          • migrations
      • Rollup
        • Introduction
        • Guides
        • API
          • executors
            • rollup
          • generators
            • init
            • configuration
            • convert-to-inferred
          • migrations
      • ESBuild
        • Introduction
        • Guides
        • API
          • executors
            • esbuild
          • generators
            • init
            • configuration
      • Rspack
        • Introduction
        • Guides
        • API
          • executors
            • rspack
            • dev-server
            • ssr-dev-server
            • module-federation-dev-server
            • module-federation-ssr-dev-server
            • module-federation-static-server
          • generators
            • configuration
            • init
            • preset
            • application
            • convert-webpack
            • convert-config-to-rspack-plugin
            • convert-to-inferred
          • migrations
      • Rsbuild
        • Introduction
        • Guides
        • API
          • generators
            • init
            • configuration
    • Test Tools illustration
      Test Tools
      • Cypress
        • Introduction
        • Guides
          • Component Testing
          • Using setupNodeEvents with Cypress preset
          • Cypress v11 Migration Guide
        • API
          • executors
            • cypress
          • generators
            • init
            • configuration
            • component-configuration
            • migrate-to-cypress-11
            • convert-to-inferred
          • migrations
      • Jest
        • Introduction
        • Guides
        • API
          • executors
            • jest
          • generators
            • init
            • configuration
            • convert-to-inferred
          • migrations
      • Playwright
        • Introduction
        • Guides
        • API
          • executors
            • playwright
          • generators
            • configuration
            • init
            • convert-to-inferred
          • migrations
      • Storybook
        • Introduction
        • Guides
          • Storybook best practices for making the most out of Nx
          • Storybook 9
          • Set up Storybook for React Projects
          • Set up Storybook for Angular Projects
          • Set up Storybook for Vue Projects
          • Configuring Storybook on Nx
          • One main Storybook instance for all projects
          • One Storybook instance per scope
          • One main Storybook instance using Storybook Composition
          • How to configure Webpack and Vite for Storybook
          • Setting up Storybook Interaction Tests with Nx
          • Upgrading Storybook using the Storybook CLI
          • Setting up Storybook Composition with Nx
          • Angular: Set up Compodoc for Storybook on Nx
          • Angular: Configuring styles and preprocessor options
        • API
          • executors
            • storybook
            • build
          • generators
            • init
            • configuration
            • convert-to-inferred
            • migrate-8
            • migrate-9
          • migrations
      • Detox
        • Introduction
        • Guides
        • API
          • executors
            • build
            • test
          • generators
            • init
            • application
            • convert-to-inferred
          • migrations
    Enterprise
    • Activate Powerpack
    • Powerpack Features
      • Free Licenses & Trials
      • Run Language-Agnostic Conformance Rules
      • Define Code Ownership at the Project Level
    Showcase
    • Nx with your favorite tech
      • Express
      • Lit
      • Solid
      • Qwik
      • Rust
      • .NET
      • Astro
      • Svelte
      • Fastify
      • Apollo GraphQL
      • Prisma with NestJS
      • Mongo with Fastify
      • Redis with Fastify
      • Postgres with Fastify
      • PlanetScale with Serverless Fastify
      • Nx with Micro-frontends
    • Benchmarks
      • Typescript Batch Mode Compilation
      • Large Repo and Caching
      • Large Repo and Nx Agents
    Reference
    • Commands
    • Nx Configuration
    • Project Configuration
    • Inputs and Named Inputs
    • .nxignore
    • Environment Variables
    • Glossary
    • Releases
    • API
      • nx
        • documents
          • create-nx-workspace
          • init
          • generate
          • run
          • daemon
          • graph
          • run-many
          • affected
          • format:check
          • format:write
          • migrate
          • report
          • list
          • connect-to-nx-cloud
          • reset
          • repair
          • sync
          • sync:check
          • import
          • exec
          • watch
          • show
          • view-logs
          • release
          • add
          • login
          • logout
        • executors
          • noop
          • run-commands
          • run-script
        • generators
          • connect-to-nx-cloud
        • migrations
      • workspace
        • documents
          • Overview
          • Nx, NodeJS and Typescript Versions
        • executors
          • counter
        • generators
          • preset
          • move
          • remove
          • convert-to-monorepo
          • new
          • run-commands
          • fix-configuration
          • npm-package
          • ci-workflow
          • infer-targets
        • migrations
      • owners
        • Overview
        • generators
          • init
          • sync-codeowners-file
      • conformance
        • Overview
        • Create a Conformance Rule
        • documents
          • Overview
          • Create a Conformance Rule
        • executors
          • bundle-rules
        • generators
          • create-rule
          • preset
      • azure-cache
        • Overview
      • gcs-cache
        • Overview
      • s3-cache
        • Overview
      • shared-fs-cache
        • Overview
        • generators
          • init
      • devkit
        • documents
          • Overview
          • Ng CLI Adapter
      • plugin
        • generators
          • plugin
          • create-package
          • e2e-project
          • migration
          • generator
          • executor
          • plugin-lint-checks
          • preset
      • web
        • executors
          • file-server
        • generators
          • init
          • application
          • static-config
      • create-nx-workspace
    Troubleshooting
    • Resolve Circular Dependencies
    • Troubleshoot Nx Install Issues
    • Troubleshoot Cache Misses
    • Unknown Local Cache Error
    • Profiling Build Performance
    • Troubleshoot Nx Console Issues
    • Troubleshoot Convert to Inferred Migration

Guides

Configure Vite on your Nx workspace

This guide explains how you can configure Vite in your Nx workspace.

26.1k
Give us a Star!
On this page
  • Overview

Footer

Nx

Smart Repos · Fast Builds

DiscordGitHubXBlueskyYoutubeLinkedInNewsletter
StatusSecurity
Theme
Theme

Resources

  • Blog
  • Youtube
  • Community
  • Customers

Solutions

  • Nx
  • Nx Cloud
  • Nx Enterprise

Nx Cloud

  • App
  • Docs
  • Pricing
  • Terms

Company

  • About us
  • Careers
  • Brands & Guidelines
  • Contact us

© 2025 made with by