Skip to content
NxNxDocs

Main navigation

DocsBlogCI Pricing
ContactGo to app
NxCIExtending NxPluginsAPIChangelogAI Chat
Community channelLatest newsYoutube channelNx is open source, check the code on GitHub
  • Getting Started
    • Intro to Nx
    • Installation
    • Why Nx?
    • Editor Setup
    • Tutorials
      • NPM Workspaces Monorepo
      • React Standalone
      • React Monorepo
      • Angular Standalone
      • Angular Monorepo
      • Vue Standalone
      • Gradle Monorepo
    Features
    • Run Tasks
    • Cache Task Results
    • Explore Your Workspace
    • Generate Code
    • Automate Updating Dependencies
    • Enforce Module Boundaries
    • Manage Releases
    • Powerpack Features
      • Run Language-Agnostic Conformance Rules
      • Define Code Ownership at the Project Level
      • Self-Host the Remote Cache
    • 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
    Concepts
    • Mental Model
    • How Caching Works
    • What is a Task Pipeline
    • What Are Nx Plugins
    • Inferred Tasks
    • Types of Configuration
    • Executors and Configurations
    • Nx Daemon
    • Sync Generators
    • Nx and Turborepo
    • Buildable and Publishable Libraries
    • Module Federation
      • Module Federation and Nx
      • Nx Module Federation Technical Overview
      • Faster Builds with Module Federation
      • Micro Frontend Architecture
      • Manage Library Versions with Module Federation
    • Organizational Decisions
      • Overview
      • Monorepos
      • Dependency Management
      • Code Ownership
      • Project Size
      • Project Dependency Rules
      • Folder Structure
    Recipes
    • Installation
      • Activate Powerpack
      • 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
      • 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)
    • 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
    • React
      • React Native with Nx
      • Remix 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
    • Angular
      • Migration
        • Migrating from Angular CLI
        • Migrating From Multiple Angular CLI Repos
      • 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
    • Node
      • 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
    • Storybook
      • 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
    • Cypress
      • Component Testing
      • Using setupNodeEvents with Cypress preset
      • Cypress v11 Migration Guide
    • Next
      • How to configure Next.js plugins
    • Nuxt
      • Deploying Nuxt applications to Vercel
    • Vite
      • Configure Vite on your Nx workspace
    • Webpack
      • How to configure Webpack in your Nx workspace
      • Webpack plugins
    • Module Federation
      • How to create a Module Federation Host Application
      • How to create a Module Federation Remote Application
      • How to Federate a Module
    • 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
      • Configuring ESLint with Typescript
      • Enable Typescript Batch Mode
      • Define Secondary Entrypoints for Typescript Packages
      • Compile Typescript Packages to Multiple Formats
      • 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
      • Use JavaScript instead TypeScript
      • Altering Migration Process
      • Using Yarn PnP
      • Switching to ESLint's flat config format
    • Nx Console
      • Telemetry
      • Project Details View
      • Generate Command
      • Run Command
      • Troubleshooting
    • Nx Release
      • Get Started with Nx Release
      • Release Projects Independently
      • Automatically Version with Conventional Commits
      • Customize Conventional Commit Types
      • File Based Versioning (Version Plans)
      • Configure Custom Registries
      • Publish in CI/CD
      • Automate GitHub Releases
      • Publish Rust Crates
      • Update Your Local Registry Setup to use Nx Release
      • Configure Changelog Format
      • Publish a Custom Dist Directory
      • Build Before Versioning
    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 DTE
    Reference
    • Commands
    • Nx Configuration
    • Project Configuration
    • Inputs and Named Inputs
    • .nxignore
    • Environment Variables
    • Glossary
    • Releases
    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
  1. recipes
  2. vite

Vite

Vite related recipes

Configure Vite on your Nx workspace

Configure Vite on your Nx workspace

On this page
  • Overview
23.4kGive us a Star!

Footer

Nx

Smart Monorepos ยท Fast CI

DiscordGitHubXYoutubeNewsletter
StatusSecurity
Theme

Resources

  • Blog
  • Youtube
  • Community
  • Customers

Solutions

  • Nx
  • Nx Cloud
  • Nx Enterprise

Nx Cloud

  • App
  • Docs
  • Pricing

Company

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

ยฉ 2024 made with by

Monorepo World just ended!

In case you missed Monorepo World, it is now available for replay.

Track 1 replayTrack 2 replay