nx-vue3-vite

0.30.0 verified Mon Apr 27 auth: no javascript

An Nx plugin for generating opinionated Vue 3 + Vite + PostCSS applications and libraries, currently at v0.30.0. It provides generators for apps, libraries, components, Vitepress docs, and Cypress e2e tests, plus executors for dev server, build, lint, unit testing, and e2e. The plugin is updated regularly alongside Nx releases (v17, v18, v20 tested) and Vite (v2–v6). It integrates with @nx/devkit, @vitejs/plugin-vue, and optionally Cypress. Compared to raw Vite setup in Nx, it offers project-local path aliases (@app, @assets, @public), standardized generator options, and automatic configuration files.

Common errors

error Cannot find module 'nx-vue3-vite' or its corresponding type declarations. ↓

cause Package not installed or type declarations not generated.

fix

Run npm install nx-vue3-vite --save-dev and ensure tsconfig.json includes 'node_modules' in typeRoots.

error Error: This generator requires Nx version >= 18.0.0 ↓

cause Using an older Nx version incompatible with the plugin.

fix

Upgrade your Nx workspace to v18 or newer.

error Error: Cypress e2e tests fail with 'Module not found' for @cypress/vite-dev-server ↓

cause Missing peer dependency @cypress/vite-dev-server.

fix

Install the missing peer: npm install @cypress/vite-dev-server --save-dev

Warnings

breaking Cypress executor may fail to detect test failures in certain configurations. ↓

fix Upgrade to v0.23.9 or later.

deprecated Global path aliases via root tsconfig.base.json may be deprecated in future; local alias is the default. ↓

fix Use --alias local to avoid depending on root tsconfig.

gotcha The index.html file must remain in the project root; moving it breaks Vite's entry point detection. ↓

fix Keep index.html in the root directory; do not move it to src/.

breaking Breaking changes when upgrading Nx major versions (e.g., 17 to 18, 18 to 20). ↓

fix Check Nx migration guide and update nx-vue3-vite to a version compatible with your Nx version.

Install

npm install nx-vue3-vite

yarn add nx-vue3-vite

pnpm add nx-vue3-vite

Imports

appGenerator

wrong

import { appGenerator } from 'nx-vue3-vite/src/generators/app'

correct

import { appGenerator } from 'nx-vue3-vite'

Main generator function for creating a Vue3+Vite application.

componentGenerator

wrong

const componentGenerator = require('nx-vue3-vite').componentGenerator

correct

import { componentGenerator } from 'nx-vue3-vite'

ESM-only; CommonJS require() will not work (package is ESM).

libraryGenerator

import { libraryGenerator } from 'nx-vue3-vite'

Generates a Vue3+Vite library.

Quickstart

Creates a new Nx workspace with empty preset, installs the plugin, generates a Vue3+Vite app named 'my-app' with Vitest, then serves it.

npx create-nx-workspace@latest my-workspace --preset empty
cd my-workspace
npm install nx-vue3-vite --save-dev
nx g nx-vue3-vite:app my-app --title 'My App' --test vitest
nx serve my-app