tessl/npm-vite-plugin-inspect

Inspect the intermediate state of Vite plugins during development and build processes

—

Pending

Overview

Eval results

Files

Nuxt Integration

Name: tessl/npm-vite-plugin-inspect
Author: tessl

Dedicated Nuxt.js module for seamless integration with Nuxt projects, providing the same inspection capabilities with Nuxt-specific configuration.

Capabilities

Nuxt Module

Pre-configured Nuxt module that automatically integrates vite-plugin-inspect with Nuxt's Vite configuration.

/**
 * Nuxt module for vite-plugin-inspect
 * @param options - Configuration options (same as ViteInspectOptions)
 * @returns Configured Nuxt module
 */
function defineNuxtModule<T>(options: ModuleOptions): NuxtModule<T>;

interface ModuleOptions extends ViteInspectOptions {}

Usage Example:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    ['vite-plugin-inspect/nuxt', {
      dev: true,
      build: false,
      silent: false
    }]
  ]
});

// Or using the 'inspect' key
export default defineNuxtConfig({
  modules: ['vite-plugin-inspect/nuxt'],
  inspect: {
    dev: true,
    build: false,
    open: false
  }
});

Module Configuration

The Nuxt module accepts all the same configuration options as the main plugin.

interface ModuleOptions {
  /** Enable the inspect plugin in dev mode @default true */
  dev?: boolean;
  /** Enable the inspect plugin in build mode @default false */
  build?: boolean;
  /** Directory for build inspector UI output @default '.vite-inspect' */
  outputDir?: string;
  /** Filter for modules to be inspected */
  include?: FilterPattern;
  /** Filter for modules to not be inspected */
  exclude?: FilterPattern;
  /** Base URL for inspector UI */
  base?: string;
  /** Print URL output silently in the terminal @default false */
  silent?: boolean;
  /** Automatically open inspect page @default false */
  open?: boolean;
  /** Remove version query and treat as same module @default true */
  removeVersionQuery?: boolean;
  /** Enable embedded mode @default false */
  embedded?: boolean;
}

Module Setup Process

The Nuxt module handles the integration automatically:

Auto-detection: Detects Nuxt's Vite configuration
Plugin Registration: Adds the inspect plugin to Vite's plugin array
Configuration Merge: Merges module options with Nuxt's base configuration
Environment Handling: Properly handles Nuxt's SSR and client environments

Development Mode Usage

In Nuxt development mode, the inspector is available at the standard endpoint:

# Start Nuxt dev server
npm run dev

# Access inspector interface
# Visit: http://localhost:3000/__inspect/

Nuxt-specific Features:

SSR Environment: Inspect server-side rendering transformations
Client Environment: Inspect client-side transformations
Universal Mode: View both environments simultaneously
Nuxt Plugins: See how Nuxt's built-in plugins transform modules

Build Mode Usage

Enable build inspection for production builds:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vite-plugin-inspect/nuxt'],
  inspect: {
    build: true,
    outputDir: '.nuxt-inspect'
  }
});

After building:

# Build the Nuxt app
npm run build

# Serve the inspection report
npx serve .nuxt-inspect

Nuxt-Specific Configuration Examples

Development Only

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vite-plugin-inspect/nuxt'],
  inspect: {
    dev: process.env.NODE_ENV === 'development',
    build: false,
    silent: false
  }
});

Filter Nuxt-Specific Files

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vite-plugin-inspect/nuxt'],
  inspect: {
    include: [
      'pages/**/*.vue',
      'components/**/*.vue', 
      'layouts/**/*.vue',
      'plugins/**/*.{js,ts}',
      'middleware/**/*.{js,ts}'
    ],
    exclude: [
      '.nuxt/**',
      'node_modules/**'
    ]
  }
});

Custom Base Path

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vite-plugin-inspect/nuxt'],
  inspect: {
    base: '/admin/',  // Inspector at /admin/__inspect/
  }
});

Environment-Specific Inspection

Nuxt applications run in multiple environments (client, server). The inspector handles both:

// Access client environment data
const clientModules = await rpc.getModulesList({ 
  vite: 'nuxt-instance', 
  env: 'client' 
});

// Access SSR environment data  
const ssrModules = await rpc.getModulesList({ 
  vite: 'nuxt-instance', 
  env: 'ssr' 
});

// Compare environments
console.log('Client modules:', clientModules.length);
console.log('SSR modules:', ssrModules.length);

// Find environment-specific modules
const clientOnlyModules = clientModules.filter(cm => 
  !ssrModules.some(sm => sm.id === cm.id)
);
console.log('Client-only modules:', clientOnlyModules.map(m => m.id));

Integration with Nuxt DevTools

The inspector can complement Nuxt DevTools for comprehensive debugging:

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['vite-plugin-inspect/nuxt'],
  inspect: {
    dev: true,
    embedded: true  // Better integration with other tools
  }
});

Advanced Nuxt Patterns

Conditional Loading

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    // Only load in development or when specifically requested
    ...(process.env.NODE_ENV === 'development' || process.env.ENABLE_INSPECT
      ? [['vite-plugin-inspect/nuxt', { dev: true, build: false }]]
      : []
    )
  ]
});

Per-Environment Configuration

// nuxt.config.ts
const inspectConfig = {
  development: {
    dev: true,
    build: false,
    open: false,
    silent: false
  },
  production: {
    dev: false, 
    build: true,
    outputDir: '.inspect-prod'
  }
};

export default defineNuxtConfig({
  modules: ['vite-plugin-inspect/nuxt'],
  inspect: inspectConfig[process.env.NODE_ENV as keyof typeof inspectConfig] || inspectConfig.development
});

Module Registration Helper

// utils/modules.ts
export function createInspectModule(options: Partial<ModuleOptions> = {}) {
  const defaults: ModuleOptions = {
    dev: process.env.NODE_ENV === 'development',
    build: false,
    silent: process.env.CI === 'true',
    open: false
  };
  
  return ['vite-plugin-inspect/nuxt', { ...defaults, ...options }];
}

// nuxt.config.ts
import { createInspectModule } from './utils/modules';

export default defineNuxtConfig({
  modules: [
    createInspectModule({
      include: ['pages/**/*.vue', 'components/**/*.vue']
    })
  ]
});

Troubleshooting

Module Not Loading

// Ensure proper module registration
export default defineNuxtConfig({
  modules: [
    // Correct ways:
    'vite-plugin-inspect/nuxt',                    // Simple
    ['vite-plugin-inspect/nuxt', { dev: true }],  // With options
  ],
  
  // Alternative configuration
  inspect: {
    dev: true
  }
});

SSR Compatibility

The plugin is fully compatible with Nuxt's SSR mode:

// Both environments are automatically handled
export default defineNuxtConfig({
  ssr: true,  // or false
  modules: ['vite-plugin-inspect/nuxt'],
  inspect: {
    dev: true
    // Automatically inspects both client and server builds
  }
});

Install with Tessl CLI

npx tessl i tessl/npm-vite-plugin-inspect

docs

performance-metrics.md

programmatic-api.md

tile.json

tessl/npm-vite-plugin-inspect