CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nuxt--vite-builder

Vite bundler for Nuxt applications providing seamless integration between Nuxt's framework and Vite's build system

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

development-server.mddocs/

Development Server

Development server integration with hot module replacement, file watching, CORS handling, and seamless SSR development support.

Capabilities

Vite-Node Plugin

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 experience

Development Server Writer

Configures 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:

  • Nitro Integration: Seamless integration with Nuxt's server engine
  • Middleware Support: Full support for server middleware during development
  • API Routes: Automatic handling of API routes in development
  • File Watching: Automatic server restart on configuration changes

Vite-Node Request Handling

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];

Server Socket Communication

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:

  • Real-time Updates: Instant communication between client and server
  • Module Invalidation: Efficient cache invalidation for changed modules
  • Error Propagation: Real-time error reporting from server to client
  • Performance Monitoring: Request/response timing and performance metrics

Hot Module Replacement

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:

  • Vue SFC Updates: Instant Single File Component updates with state preservation
  • Server Code Updates: Hot replacement of server-side code without restart
  • CSS Updates: Style updates without page reload
  • Asset Updates: Dynamic replacement of static assets
  • Error Recovery: Automatic error recovery and state restoration

Development Middleware

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:

  • Request Routing: Intelligent routing between Vite and Nuxt handlers
  • Asset Serving: Automatic serving of development assets
  • API Integration: Seamless API route handling during development
  • CORS Support: Configurable cross-origin request handling

File Watching

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:

  • Smart Watching: Only watches relevant files for better performance
  • Ignore Patterns: Configurable ignore patterns for node_modules, etc.
  • Debouncing: Intelligent debouncing to prevent excessive rebuilds
  • Cross-platform: Consistent behavior across Windows, macOS, and Linux

Development Performance

Performance optimizations specifically for development experience.

Performance Features:

  • Lazy Loading: Modules loaded on-demand during development
  • Incremental Builds: Only rebuild changed modules
  • Memory Management: Efficient memory usage for long development sessions
  • Caching Strategy: Intelligent caching of transformations and dependencies

Error Handling

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:

  • Error Overlay: Visual error overlay in browser during development
  • Source Maps: Accurate error location mapping with source maps
  • Recovery Mechanisms: Automatic recovery from non-fatal errors
  • Clear Messaging: Human-readable error messages with context

Development Utilities

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 Configuration

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)]
    }
  }
};

Integration Points

Key integration points with other Nuxt systems during development.

Integration Features:

  • Nuxt DevTools: Integration with Nuxt DevTools for debugging
  • Vue DevTools: Support for Vue DevTools browser extension
  • TypeScript: Real-time TypeScript compilation and error reporting
  • ESLint: Integration with ESLint for code quality checking
  • Testing: Support for testing frameworks during development

Install with Tessl CLI

npx tessl i tessl/npm-nuxt--vite-builder

docs

client-building.md

css-processing.md

development-server.md

index.md

main-bundling.md

manifest-generation.md

plugin-system.md

server-building.md

tile.json