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

Manifest Generation

Name: tessl/npm-nuxt--vite-builder
Author: tessl

Client and server manifest generation for optimal asset loading and bundle resolution in both development and production environments.

Capabilities

Write Manifest Function

Generates and writes client and server manifests for bundle resolution and optimal asset loading.

/**
 * Write client and server manifests for bundle resolution
 * Creates manifests for optimal asset loading and bundle resolution
 * @param ctx - Vite build context containing build information
 */
function writeManifest(ctx: ViteBuildContext): Promise<void>;

Usage Example:

import { writeManifest } from "@nuxt/vite-builder/manifest";
import type { ViteBuildContext } from "@nuxt/vite-builder";

// Called automatically after server build completion
await writeManifest(ctx);

// Generates:
// - Client manifest for asset resolution
// - Server manifest for SSR bundle loading
// - Development manifests for hot reloading

Client Manifest Structure

Client-side manifest for browser asset loading and module resolution.

/**
 * Client manifest structure for asset resolution
 * Maps module IDs to their corresponding assets and metadata
 */
interface ClientManifest {
  [moduleId: string]: {
    /** Whether this is an entry point module */
    isEntry: boolean;
    /** File path relative to build output */
    file: string;
    /** Associated CSS files */
    css?: string[];
    /** Associated asset files */
    assets?: string[];
    /** Whether module uses ES modules */
    module?: boolean;
    /** Resource type (script, style, etc.) */
    resourceType: 'script' | 'style' | 'font' | 'image';
  };
}

Client Manifest Features:

Module Mapping: Maps module IDs to their built assets
CSS Association: Links modules to their associated CSS files
Asset Tracking: Tracks all assets associated with each module
Entry Point Detection: Identifies application entry points
Resource Type Classification: Categorizes resources for optimal loading

Development Manifest

Special manifest structure for development mode with hot module replacement support.

/**
 * Development client manifest for HMR support
 * Simplified manifest structure for development builds
 */
interface DevClientManifest {
  '@vite/client': {
    isEntry: true;
    file: '@vite/client';
    css: string[];
    module: true;
    resourceType: 'script';
  };
  [entryPath: string]: {
    isEntry: true;
    file: string;
    module: true;
    resourceType: 'script';
  };
}

Development Features:

Vite Client Integration: Includes Vite's HMR client
Simplified Structure: Reduced complexity for faster development
Hot Updates: Supports hot module replacement
Dynamic Loading: Enables dynamic module loading during development

Production Manifest

Optimized manifest for production builds with asset fingerprinting and optimization.

// Production manifest example
{
  "entry": {
    "isEntry": true,
    "file": "entry.a1b2c3d4.js",
    "css": ["assets/entry.e5f6g7h8.css"],
    "assets": ["assets/logo.i9j0k1l2.png"],
    "module": true,
    "resourceType": "script"
  },
  "components/Header.vue": {
    "isEntry": false,
    "file": "assets/Header.m3n4o5p6.js",
    "css": ["assets/Header.q7r8s9t0.css"],
    "module": true,
    "resourceType": "script"
  }
}

Asset Path Processing

Sophisticated asset path processing for different deployment environments.

/**
 * Asset path processing configuration
 */
interface AssetPathConfig {
  /** Build assets directory */
  buildAssetsDir: string;
  /** Base URL for assets */
  baseURL: string;
  /** Whether to use relative paths */
  relative?: boolean;
}

Path Processing Features:

Relative Path Conversion: Converts absolute paths to relative when needed
Base URL Integration: Applies base URL prefixes for CDN deployment
Asset Directory Mapping: Maps assets to their final deployment paths
Cross-platform Compatibility: Ensures paths work across different platforms

Manifest Normalization

Normalizes Vite's raw manifest format for use with vue-bundle-renderer.

/**
 * Normalize Vite manifest for vue-bundle-renderer
 * Converts Vite's manifest format to vue-bundle-renderer format
 * @param manifest - Raw Vite manifest
 * @returns Normalized manifest for rendering
 */
function normalizeViteManifest(manifest: ViteClientManifest): RendererManifest;

/**
 * Vue bundle renderer manifest format
 */
interface RendererManifest {
  [moduleId: string]: {
    isEntry: boolean;
    file: string;
    css: string[];
    assets?: string[];
    module?: boolean;
    resourceType: string;
  };
}

Build Directory Management

Manages manifest files across different build directories and environments.

Directory Structure:

.nuxt/
├── dist/
│   ├── client/
│   │   ├── manifest.json      # Client manifest
│   │   ├── entry.js           # Entry point
│   │   └── assets/            # Static assets
│   └── server/
│       ├── server.mjs         # Server entry
│       └── manifest.json      # Server manifest (if needed)

SSR Manifest Integration

Special handling for server-side rendering manifest requirements.

/**
 * SSR manifest configuration
 */
interface SSRManifestConfig {
  /** Whether SSR is enabled */
  ssr: boolean;
  /** Server manifest path */
  serverManifest?: string;
  /** Client manifest path */
  clientManifest: string;
}

SSR Features:

Client/Server Coordination: Ensures client and server manifests are compatible
Hydration Support: Provides information needed for proper hydration
Route-based Splitting: Supports route-based code splitting in SSR
Performance Optimization: Optimizes manifest size for SSR scenarios

Asset Optimization

Advanced asset handling and optimization within manifest generation.

Optimization Features:

Fingerprinting: Adds content hashes to asset filenames
Compression: Identifies compressed asset variants
Preloading: Marks critical assets for preloading
Lazy Loading: Identifies assets suitable for lazy loading

Manifest Utilities

Utility functions for working with manifests in different contexts.

/**
 * Sanitize file path for cross-platform compatibility
 * @param path - File path to sanitize
 * @returns Sanitized file path
 */
function sanitizeFilePath(path: string): string;

/**
 * Get filename from path without extension
 * @param path - File path
 * @returns Filename without extension
 */
function filename(path: string): string;

/**
 * Resolve asset file names with hash patterns
 * @param chunk - Rollup chunk information
 * @returns Formatted asset filename
 */
function resolveAssetFileName(chunk: RenderedChunk): string;

Error Handling

Comprehensive error handling for manifest generation failures.

Error Scenarios:

File System Errors: Handles manifest write failures
Path Resolution Errors: Manages invalid asset path references
Format Validation: Ensures manifest format correctness
Dependency Tracking: Handles missing asset dependencies

Development vs Production

Manifest generation adapts to different build modes with appropriate optimizations.

Development Mode:

Simplified manifest structure
Real-time manifest updates
HMR integration
Fast generation for better DX

Production Mode:

Optimized manifest structure
Asset fingerprinting
Compression information
Performance-focused generation

Integration with Vue Bundle Renderer

Seamless integration with vue-bundle-renderer for optimal SSR performance.

Integration Features:

Format Compatibility: Ensures manifest format works with vue-bundle-renderer
Performance Optimization: Optimizes manifest structure for rendering performance
Caching Support: Provides information for effective caching strategies
Preload Generation: Generates preload hints for critical resources

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

tessl/npm-nuxt--vite-builder