skills.rest
pantheon-org
pantheon-orgOFFICIAL
Explore all skills by this author →
GitHub

nx-vite-integration

Configure Vite as the build tool within Nx monorepos.

9|Updated Feb 21, 2026
Search Tags:#vitest#frontend#configuration#monorepo#vite#build tools#nx
One-click install
npx skills add https://github.com/pantheon-org/tekhne --skill nx-vite-integration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nx-vite-integration
Source: https://github.com/pantheon-org/tekhne/tree/main/skills/repository-mgmt/nx/vite-integration
Command: npx skills add https://github.com/pantheon-org/tekhne --skill nx-vite-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of integrating Vite into Nx monorepos, addressing common challenges with configuration, path resolution, and build outputs for both applications and libraries.

Core Features & Use Cases

  • Vite Configuration: Provides a robust vite.config.ts setup with Nx-specific plugins.
  • Path Alias Resolution: Ensures seamless cross-project imports using nxViteTsPaths.
  • Library Builds: Configures Vite for efficient library mode builds with proper externalization and DTS generation.
  • Vitest Integration: Sets up Vitest for reliable testing within the Nx environment.
  • Use Case: When migrating an Nx project from Webpack to Vite, this Skill guides you through installing dependencies, configuring vite.config.ts, setting up Nx targets, and verifying the setup, ensuring a smooth transition and optimized build performance.

Quick Start

Use the nx-vite-integration skill to add Vite to your Nx project named 'my-app'.

Frequently Asked Questions about nx-vite-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Vite in an Nx monorepo?▼

To configure Vite in an Nx monorepo, set up a vite.config.ts file using Nx-specific plugins to handle application and library builds, ensuring seamless cross-project imports with nxViteTsPaths.

What is the best way to migrate an Nx project from Webpack to Vite?▼

Migrating an Nx project from Webpack to Vite involves installing dependencies, configuring vite.config.ts, setting up Nx targets, and verifying the setup to achieve optimized build performance.

How do I set up Vitest in an Nx workspace?▼

Setting up Vitest in an Nx workspace requires configuring the testing framework within the Vite environment to ensure reliable test execution and proper module resolution across monorepo projects.

Why does TypeScript path resolution fail when adding Vite to Nx?▼

TypeScript path resolution fails in Vite without proper alias configuration, which can be fixed by integrating the nxViteTsPaths plugin to ensure seamless cross-project imports.

Can I use Vite library mode for builds in an Nx monorepo?▼

Yes, you can configure Vite for efficient library mode builds within an Nx monorepo, handling proper dependency externalization and generating TypeScript declaration files.

Related Skills

Explore More Software Engineering Skills→
ViewableGravyViewableGravy

repo-package-references

Configure monorepo package references with workspace dependencies, Nx, and TypeScript path aliases.

Community
Intermediate
nrwlnrwl
1.4k

nx-run-tasks

Automate Nx workspace tasks across single or multiple projects.

Official
Intermediate
sayali-ingle-pdlsayali-ingle-pdl

vite-config

Generate a Vue 3 vite.config.ts with build, dev server, and plugin settings.

Community
Intermediate
jholhewresjholhewres
3

bundler-analyze

Analyze JavaScript bundle sizes for Vite and Webpack projects.

Community
Basic