Skip to content
NxDocs

Main navigation

BlogCommunityLaunch NxContact us
Go 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
    Features
    • Run Tasks
    • Cache Task Results
    • Explore your Workspace
    • Generate Code
    • 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
      • Set up Nx Cloud On-Premise
    Concepts
    • Mental Model
    • How Caching Works
    • What is a Task Pipeline
    • What Are Nx Plugins
    • Inferred Tasks
    • Types of Configuration
    • Executors and Configurations
    • Integrated Repos vs. Package-Based Repos vs. Standalone Apps
    • Module Federation
      • Module Federation and Nx
      • Faster Builds with Module Federation
      • Micro Frontend Architecture
      • Manage Library Versions with Module Federation
    • More Concepts
      • Incremental Builds
      • Nx and Turborepo
      • Monorepos
      • Dependency Management
      • Code Sharing
      • Using Nx at Enterprises
      • Nx Daemon
      • Nx and the Angular CLI
      • Folder Structure
      • Nx Devkit and Angular Devkit
      • Applications and Libraries
      • Creating Libraries
      • Library Types
      • Grouping Libraries
      • Buildable and Publishable Libraries
      • How the Project Graph is Built
    Recipes
    • Tasks & Caching
      • Configure Inputs for Task Caching
      • Configure Outputs for Task Caching
      • Define a Task Pipeline
      • Change Cache Location
      • Run Custom Commands
      • Run Tasks in Parallel
      • Run Root-Level NPM Scripts with Nx
      • Workspace Watching
      • Reduce Repetitive Configuration
    • Adopting Nx
      • NPM/Yarn/PNPM workspaces
      • Migrate From Turborepo
      • Add to any Project
      • Preserving Git Histories
      • Manual migration
    • React
      • React 18 Migration
      • 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
    • Angular
      • Migration
        • Migrating from Angular CLI
        • Migrating From Multiple Angular CLI Repos
        • Migrating Angular Application manually
      • 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
      • 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
    • Installation
      • Install Nx in a Non-Javascript Repo
      • Update Your Global Nx Installation
    • Tips and tricks
      • Add a Package-based Project in an Integrated Repo
      • Add an Integrated Project in a Package-based Repo
      • Convert from a Standalone Repository to an Integrated Repository
      • 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
    • Troubleshooting
      • Resolve Circular Dependencies
      • Troubleshooting Nx Install Issues
      • Troubleshoot Cache Misses
      • Unknown Local Cache Error
      • Profiling Build Performance
    • Nx Console
      • Telemetry
      • Project Details View
      • Generate Command
      • Run Command
      • Add Dependency Command
      • Project Pane
      • Keyboard Shortcuts
      • Troubleshooting
    • Nx Release
      • Get Started with Nx Release
      • Release Projects Independently
      • Automatically Version with Conventional Commits
      • Configure Custom Registries
      • Publish in CI/CD
      • Automate GitHub Releases
      • Publish Rust Crates
      • Update Your Local Registry Setup to use Nx Release
      • Customize Conventional Commit Types
    • Other
      • Rescope Packages from @nrwl to @nx
    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
  1. recipes
  2. vite

Vite

Vite related recipes

Configure Vite on your Nx workspace

Configure Vite on your Nx workspace

On this page
  • Overview
21.9kGive us a Star!

Footer

Nx

Smart Monorepos ยท Fast CI

DiscordGitHubXYoutubeNewsletter

Resources

  • Blog
  • Youtube Channel
  • Nx Playbook
  • Brands & Guidelines
  • Site Map

Help

  • Documentation
  • Community
  • StackOverflow
  • Report Issues
  • Status Page

Community

  • X
  • GitHub
  • Newsletter
  • Discord
  • Help Us

Solutions

  • Nx
  • Nx Cloud

ยฉ 2024 made with by