Skip to content
NxDocs

Nx Conf is happening again!!Nx Conf is happening again!!Details here→

NxNx CloudExtending NxPackagesChangelog
Community channelLatest newsYoutube channelNx is open source, check the code on GitHub
  • Getting Started
    • Intro to Nx
    • Installation
    • Why Nx?
    • Tutorials
      • Package-Based Monorepo
      • Integrated Monorepo
      • React Standalone
      • Angular Standalone
      • Node Standalone
    Core Features
    • Run Tasks
    • Cache Task Results
    • Use Remote Caching
    • Distribute Task Execution
    • Explore the Graph
    • Automate Updating Dependencies
    • Enforce Module Boundaries
    • Integrate with Editors
    • Plugin Features
      • Use Task Executors
      • Use Code Generators
    Concepts
    • Integrated Repos vs. Package-Based Repos vs. Standalone Apps
    • Mental Model
    • Types of Configuration
    • How Caching Works
    • Improve Worst Case CI Times
    • Task Pipeline Configuration
    • Affected
    • More Concepts
      • Customizing Inputs
      • Incremental Builds
      • Illustrated Distributed Task Execution
      • 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
      • Micro Frontend Architecture
      • Faster Builds with Module Federation
      • Applications and Libraries
      • Creating Libraries
      • Library Types
      • Grouping Libraries
      • Buildable and Publishable Libraries
      • How the Project Graph is Built
      • Nx and the Nx Wrapper
      • Managing your Global Nx Installation
    Recipes
    • Adopting Nx
      • NPM/Yarn/PNPM workspaces
      • Add to any Project
      • Nx and Lerna
      • Preserving Git Histories
      • Manual migration
    • React
      • Migrating from CRA
      • 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
        • Migrating from AngularJS
      • 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
      • 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
      • Setting up Storybook Composition with Nx
      • Angular: Set up Compodoc for Storybook on Nx
      • Angular: Configuring styles and preprocessor options
    • Cypress
      • Component Testing
      • Cypress v11 Migration Guide
    • Deno
      • Add a Deno Project
      • Serverless deployment with Deno Deploy
      • Add and Deploy Netlify Edge Functions with Deno
    • Next
      • How to configure Next.js plugins
    • Vite
      • Manually set up your project to use Vite.js
    • Webpack
      • How to configure webpack on your Nx workspace
      • Webpack plugins
    • Enforce Module Boundaries
      • Ban Dependencies with Certain Tags
      • Tag in Multiple Dimensions
      • Ban External Imports
      • Tags Allow List
    • CI
      • CI Setup
      • Prepare applications for deployment via CI
      • Setting up Azure Pipelines
      • Setting up CircleCI
      • Setting up GitHub Actions
      • Setting up Jenkins
      • Setting up GitLab
      • Setting up Bitbucket
    • 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 Environment Variables
      • Configuring Browser Support
      • Include Assets in Build
      • Include All package.json Files as Projects
      • Identify Dependencies Between Folders
      • Reduce Repetitive Configuration
      • Run Root-Level NPM Scripts with Nx
      • Disable Graph Links Created from Analyzing Source Files
      • Workspace Watching
      • Use JavaScript instead TypeScript
      • Altering Migration Process
      • Running Custom Commands
      • 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
      • Generate Command
      • Run Command
      • Add Dependency Command
      • Project Pane
      • Keyboard Shortcuts
    • Other
      • Rescope Packages from @nrwl to @nx
    Showcase
    • Example Repos
      • Add an Express Project
      • Add a Lit Project
      • Add a Solid Project
      • Add a Qwik Project
      • Add a Rust Project
      • Add a .NET Project
      • Add a Nuxt Project
      • Add an Astro Project
      • Add a Vue Project
      • Add a Svelte Project
      • Add a Fastify Project
      • Powering Up React Development With Nx
      • Using Apollo GraphQL
      • Using Prisma with NestJS
      • Using Mongo with Fastify
      • Using Redis with Fastify
      • Using Postgres with Fastify
      • Using PlanetScale with Serverless Fastify
      • Nx Micro-Frontend Example
    • Benchmarks
      • Typescript Batch Mode Compilation
      • Large Repo and Caching
      • Large Repo and DTE
    Reference
    • Nx Configuration
    • Project Configuration
    • .nxignore
    • Environment Variables
    • Glossary
  1. recipes
  2. vite

Vite

Vite related recipes

Manually set up your project to use Vite.js

Manually set up your project to use Vite.js

On this page
  • Overview
19.1kGive us a Star!
Report an issue

Footer

Nx

Smart, Fast and Extensible Build System

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
  • NxCloud

© 2023 made with by