Vite bundler for Nuxt applications providing seamless integration between Nuxt's framework and Vite's build system
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Development server integration with hot module replacement, file watching, CORS handling, and seamless SSR development support.
Integrates vite-node for seamless SSR development with hot module replacement and server-side transformations.
/**
* Vite-node plugin for SSR development
* Provides seamless SSR development with hot module replacement for server code
* @param nuxt - Nuxt instance with development configuration
* @returns Vite plugin instance for vite-node integration
*/
function ViteNodePlugin(nuxt: Nuxt): Plugin;Usage Example:
import { ViteNodePlugin } from "@nuxt/vite-builder/vite-node";
import type { Nuxt } from "@nuxt/schema";
// Used internally during client build setup
const plugin = ViteNodePlugin(nuxt);
// Enables:
// - Server-side hot module replacement
// - Real-time server code transformation
// - Seamless SSR development experienceConfigures and writes development server configuration for Nitro integration.
/**
* Write development server configuration
* Creates development server setup for Nitro integration with proper middleware
* @param nuxt - Nuxt instance with server configuration
*/
function writeDevServer(nuxt: Nuxt): Promise<void>;Development Server Features:
Sophisticated request/response system for vite-node communication during development.
/**
* Vite-Node request mapping interface
* Defines request/response types for vite-node communication
*/
interface ViteNodeRequestMap {
/** Manifest request for client bundle information */
manifest: {
request: undefined;
response: Manifest;
};
/** Invalidation request for cache clearing */
invalidates: {
request: undefined;
response: string[];
};
/** Module resolution request */
resolve: {
request: { id: string; importer?: string };
response: ResolveIdResponse | null;
};
/** Module transformation request */
module: {
request: { moduleId: string };
response: FetchResult;
};
}
/**
* Request type helper for vite-node requests
*/
type RequestOf = {
[K in keyof ViteNodeRequestMap]: {
id: number;
type: K;
payload: ViteNodeRequestMap[K]['request'];
};
}[keyof ViteNodeRequestMap];Socket-based communication system for real-time development server updates.
/**
* Vite-Node server for handling SSR transformations
* Manages server-side module transformations and caching
*/
class ViteNodeServer {
/** Transform server-side modules */
transformRequest(id: string): Promise<FetchResult>;
/** Resolve module dependencies */
resolveId(id: string, importer?: string): Promise<ResolveIdResponse | null>;
/** Invalidate module cache */
invalidateModule(id: string): void;
}Socket Features:
Advanced HMR system for both client and server-side code during development.
/**
* HMR configuration for development server
*/
interface HMRConfig {
/** HMR protocol (ws/wss) */
protocol?: 'ws' | 'wss';
/** HMR server port */
port?: number;
/** Custom HMR server instance */
server?: Server;
/** HMR client options */
clientPort?: number;
}HMR Features:
Middleware system for integrating Vite development server with Nuxt's request handling.
/**
* Development middleware handler
* Integrates Vite dev server with Nuxt's middleware system
*/
interface DevMiddleware {
/** Handle incoming requests through Vite middleware */
handle(req: IncomingMessage, res: ServerResponse): Promise<void>;
/** Skip Vite transformation for specific requests */
skipTransform(req: IncomingMessage & { _skip_transform?: boolean }): void;
}Middleware Features:
Advanced file watching system for automatic rebuilds and hot updates.
/**
* File watching configuration
*/
interface WatchOptions {
/** Files and directories to watch */
include?: string[];
/** Files and directories to ignore */
exclude?: string[];
/** Chokidar options for file watching */
chokidar?: ChokidarOptions;
}File Watching Features:
Performance optimizations specifically for development experience.
Performance Features:
Comprehensive error handling and developer experience improvements.
/**
* Development error information
*/
interface DevError {
/** Error message */
message: string;
/** Error stack trace */
stack?: string;
/** File location of error */
loc?: { file: string; line: number; column: number };
/** Error type/category */
type: 'transform' | 'resolve' | 'syntax' | 'runtime';
}Error Handling Features:
Utility functions for development server management and debugging.
/**
* Warmup Vite server with entry files
* Pre-transforms entry files for faster initial loading
* @param server - Vite development server
* @param entries - Array of entry file paths
* @param isServer - Whether this is for server-side code
*/
function warmupViteServer(
server: ViteDevServer,
entries: string[],
isServer: boolean
): Promise<void>;
/**
* Create custom Vite logger
* Creates logger with Nuxt-specific formatting and filtering
* @param config - Vite configuration
* @param options - Logger options
* @returns Custom logger instance
*/
function createViteLogger(
config: ViteConfig,
options?: { hideOutput?: boolean }
): Logger;Development-specific configuration options and defaults.
// Development server configuration
const devConfig = {
server: {
middlewareMode: true,
warmup: {
clientFiles: [ctx.entry],
ssrFiles: [serverEntry]
},
watch: {
...nuxt.options.watchers.chokidar,
ignored: [isIgnored, /[\\/]node_modules[\\/]/]
},
fs: {
allow: [...new Set(allowDirs)]
}
}
};Key integration points with other Nuxt systems during development.
Integration Features:
Install with Tessl CLI
npx tessl i tessl/npm-nuxt--vite-builder