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

plugin-system.mddocs/

Plugin System

Comprehensive Vite plugin system providing specialized functionality for Nuxt applications, including SSR styles, asset handling, and development tools.

Capabilities

SSR Styles Plugin

Manages CSS extraction and inlining for server-side rendering with sophisticated style optimization.

/**
 * SSR styles plugin for CSS extraction and inlining
 * Handles CSS processing for both server and client builds with style optimization
 * @param options - Plugin configuration options
 * @returns Vite plugin instance for SSR style handling
 */
function SSRStylesPlugin(options: SSRStylesPluginOptions): Plugin;

interface SSRStylesPluginOptions {
  /** Source directory path for relative path resolution */
  srcDir: string;
  /** Set of chunk IDs that should have CSS inlined */
  chunksWithInlinedCSS: Set<string>;
  /** Function or boolean determining if styles should be inlined */
  shouldInline?: ((id?: string) => boolean) | boolean;
  /** Array of Nuxt component definitions */
  components: Component[];
  /** Mapping of CSS files to client chunks */
  clientCSSMap: Record<string, Set<string>>;
  /** Application entry point file */
  entry: string;
  /** Global CSS file paths */
  globalCSS: string[];
  /** Build mode: server or client */
  mode: 'server' | 'client';
}

Usage Example:

import { SSRStylesPlugin } from "@nuxt/vite-builder/plugins/ssr-styles";

// Used internally by Nuxt's build process
const plugin = SSRStylesPlugin({
  srcDir: nuxt.options.srcDir,
  chunksWithInlinedCSS: new Set(),
  shouldInline: nuxt.options.features.inlineStyles,
  components: nuxt.apps.default!.components || [],
  globalCSS: nuxt.options.css,
  mode: 'client',
  entry: ctx.entry,
  clientCSSMap: {}
});

Public Directories Plugin

Handles public asset resolution and URL rewriting for different deployment environments.

/**
 * Public directories plugin for asset resolution
 * Manages public asset serving and URL resolution in development and production
 * @param options - Plugin configuration options
 * @returns Array of Vite plugin instances for public asset handling
 */
function PublicDirsPlugin(options: VitePublicDirsPluginOptions): Plugin[];

interface VitePublicDirsPluginOptions {
  /** Development mode flag */
  dev?: boolean;
  /** Base URL for public assets */
  baseURL?: string;
}

Plugin Features:

  • Development URL Rewriting: Rewrites asset URLs during development
  • Public Asset Resolution: Resolves assets from public directories
  • Base URL Handling: Manages base URL prefixes for different environments
  • CSS URL Processing: Processes CSS url() references to public assets

Development Style SSR Plugin

Specialized plugin for handling styles during SSR development with hot updates.

/**
 * Development style SSR plugin for client builds
 * Handles style processing during development with hot module replacement
 * @param options - Plugin configuration
 * @returns Vite plugin instance
 */
function DevStyleSSRPlugin(options: {
  /** Source directory path */
  srcDir: string;
  /** Build assets URL for CSS references */
  buildAssetsURL: string;
}): Plugin;

Runtime Paths Plugin

Manages runtime path resolution for assets and modules in different environments.

/**
 * Runtime paths plugin for asset URL resolution
 * Provides runtime path resolution for assets and modules
 * @returns Vite plugin instance
 */
function RuntimePathsPlugin(): Plugin;

Path Resolution Features:

  • Asset URL Generation: Generates correct asset URLs at runtime
  • Environment Adaptation: Adapts paths for different deployment environments
  • Module Resolution: Handles module path resolution in different contexts

Type Check Plugin

Integrates TypeScript type checking into the build process with configurable options.

/**
 * TypeScript type checking plugin
 * Integrates TypeScript type checking into Vite build process
 * @param nuxt - Nuxt instance with TypeScript configuration
 * @returns Vite plugin instance
 */
function TypeCheckPlugin(nuxt: Nuxt): Plugin;

Type Checking Features:

  • Build Integration: Runs type checking during build process
  • IDE Integration: Provides type checking feedback in development
  • Configuration Respect: Uses project's TypeScript configuration
  • Error Reporting: Provides clear type error messages

Module Preload Polyfill Plugin

Adds polyfill support for module preloading in browsers that don't support it natively.

/**
 * Module preload polyfill for older browsers
 * Adds polyfill for module preloading in unsupported browsers
 * @returns Vite plugin instance
 */
function ModulePreloadPolyfillPlugin(): Plugin;

Stable Entry Plugin

Ensures stable entry point hashing for better caching and deployment consistency.

/**
 * Stable entry plugin for consistent chunk hashing
 * Provides stable hashing for entry points to improve caching
 * @param nuxt - Nuxt instance
 * @returns Vite plugin instance
 */
function StableEntryPlugin(nuxt: Nuxt): Plugin;

Sourcemap Preserver Plugin

Preserves sourcemap information through the build pipeline for debugging.

/**
 * Sourcemap preserver plugin for build pipeline integration
 * Preserves sourcemap information through Nitro build process
 * @param nuxt - Nuxt instance
 * @returns Vite plugin instance
 */
function SourcemapPreserverPlugin(nuxt: Nuxt): Plugin;

Vue Feature Flags Plugin

Manages Vue-specific feature flags and compilation options.

/**
 * Vue feature flags plugin for server builds
 * Manages Vue compilation feature flags and optimization
 * @param nuxt - Nuxt instance
 * @returns Vite plugin instance
 */
function VueFeatureFlagsPlugin(nuxt: Nuxt): Plugin;

Analyze Plugin

Provides bundle analysis and visualization capabilities for production builds.

/**
 * Analyze plugin for bundle visualization
 * Generates bundle analysis reports for optimization insights
 * @param nuxt - Nuxt instance with analysis configuration
 * @returns Promise resolving to array of Vite plugins
 */
function AnalyzePlugin(nuxt: Nuxt): Promise<Plugin[]>;

Analysis Features:

  • Bundle Size Analysis: Detailed breakdown of bundle sizes
  • Dependency Visualization: Visual representation of dependencies
  • Chunk Analysis: Analysis of code splitting effectiveness
  • Performance Insights: Recommendations for optimization

Vite-Node Plugin

Integrates vite-node for seamless SSR development with hot updates.

/**
 * Vite-node plugin for SSR development
 * Provides seamless SSR development with hot module replacement
 * @param nuxt - Nuxt instance
 * @returns Vite plugin instance
 */
function ViteNodePlugin(nuxt: Nuxt): Plugin;

Vite-Node Features:

  • SSR Hot Updates: Hot module replacement for server-side code
  • Module Transformation: Real-time server code transformation
  • Dependency Tracking: Proper invalidation of server dependencies
  • Development Performance: Fast SSR development experience

Plugin Utilities

Common utilities used across multiple plugins for consistent behavior.

/**
 * Check if file is a Vue component
 * @param file - File path to check
 * @returns Boolean indicating if file is Vue component
 */
function isVue(file: string): boolean;

/**
 * Check if file is a CSS file
 * @param file - File path to check
 * @returns Boolean indicating if file is CSS
 */
function isCSS(file: string): boolean;

/**
 * Convert value to array format
 * @param value - Value to convert
 * @returns Array containing the value(s)
 */
function toArray<T>(value: T | T[]): T[];

Plugin Configuration

Standard configuration patterns used across Nuxt Vite plugins.

/**
 * Base plugin configuration interface
 */
interface BasePluginOptions {
  /** Development mode flag */
  dev?: boolean;
  /** Source directory path */
  srcDir?: string;
  /** Build directory path */
  buildDir?: string;
}

Plugin Registration

Plugins are automatically registered by the build system with proper ordering.

Plugin Registration Order:

  1. Core Vue Plugins: Vue SFC and JSX compilation
  2. Nuxt Infrastructure: Public dirs, runtime paths
  3. Development Tools: Type checking, HMR support
  4. Style Processing: CSS extraction, SSR styles
  5. Production Optimization: Bundle analysis, stable entry
  6. Build Integration: Sourcemap preservation, feature flags

Error Handling

Plugins include comprehensive error handling and recovery mechanisms.

Error Handling Features:

  • Plugin Initialization: Graceful handling of plugin setup failures
  • Transform Errors: Clear error messages for code transformation issues
  • Asset Resolution: Helpful messages for missing assets or dependencies
  • Development Recovery: Automatic recovery from development-time errors

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