tessl/npm-nuxt--schema

Nuxt types and default configuration providing comprehensive TypeScript types, schema definitions, and configuration system for the Nuxt framework.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Hook System

Name: tessl/npm-nuxt--schema
Author: tessl

The hook system in @nuxt/schema provides comprehensive type definitions for Nuxt's extensible lifecycle events, enabling modules and plugins to integrate seamlessly with the Nuxt build and runtime processes.

Core Hook Types

HookResult

type HookResult = Promise<void> | void

NuxtHooks Interface

The complete hook system interface defining all available lifecycle hooks.

interface NuxtHooks {
  // Compatibility and module system
  'kit:compatibility': (compatibility: NuxtCompatibility, issues: NuxtCompatibilityIssues) => HookResult
  
  // Core lifecycle
  'ready': (nuxt: Nuxt) => HookResult
  'close': (nuxt: Nuxt) => HookResult
  'restart': (options?: { hard?: boolean }) => HookResult
  
  // Build lifecycle
  'build:before': (nuxt: Nuxt, buildOptions: any) => HookResult
  'build:done': (nuxt: Nuxt) => HookResult
  'build:manifest': (manifest: Manifest) => HookResult
  
  // Module lifecycle
  'modules:before': () => HookResult
  'modules:done': () => HookResult
  
  // App generation
  'app:resolve': (app: NuxtApp) => HookResult  
  'app:templates': (app: NuxtApp) => HookResult
  'app:templatesGenerated': (app: NuxtApp, templates: ResolvedNuxtTemplate[], resolver: Function) => HookResult
  
  // Component system
  'components:dirs': (dirs: ComponentsDir[]) => HookResult
  'components:extend': (components: Component[]) => HookResult
  
  // Import system
  'imports:sources': (presets: ImportPresetWithDeprecation[]) => HookResult
  'imports:extend': (imports: Import[]) => HookResult
  'imports:context': (context: Unimport) => HookResult
  'imports:dirs': (dirs: string[]) => HookResult
  
  // Development
  'dev:ssr-logs': (logs: any[]) => HookResult
  'webpack:config': (webpackConfigs: Configuration[]) => HookResult
  'webpack:configResolved': (webpackConfigs: Configuration[]) => HookResult
  'webpack:compile': (options: { name: string, compiler: Compiler }) => HookResult
  'webpack:compilation': (compilation: any, compiler: Compiler) => HookResult
  'webpack:compiled': (options: { name: string, compiler: Compiler, stats: Stats }) => HookResult
  'webpack:change': (shortPath: string) => HookResult
  'webpack:error': (error: WebpackError) => HookResult
  'webpack:done': () => HookResult
  'webpack:progress': (statesArray: any[]) => HookResult
  
  // Vite integration
  'vite:extend': (viteBuildContext: { nuxt: Nuxt, config: ViteConfig }) => HookResult
  'vite:extendConfig': (viteInlineConfig: ViteUserConfig, env: { isClient: boolean, isServer: boolean }) => HookResult
  'vite:configResolved': (viteConfig: ResolvedConfig, env: { isClient: boolean, isServer: boolean }) => HookResult
  'vite:serverCreated': (viteServer: ViteDevServer, env: { isClient: boolean, isServer: boolean }) => HookResult
  'vite:compiled': () => HookResult
  
  // Nitro integration  
  'nitro:config': (nitroConfig: NitroConfig) => HookResult
  'nitro:init': (nitro: Nitro) => HookResult
  'nitro:build:before': (nitro: Nitro) => HookResult
  'nitro:build:public-assets': (nitro: Nitro) => HookResult
  
  // Page and routing
  'pages:extend': (pages: NuxtPage[]) => HookResult
  'page:transition:finish': (page?: NuxtPage) => HookResult
  
  // Generation hooks
  'generate:before': (generator: any, generateOptions: any) => HookResult
  'generate:done': (generator: any, generateOptions: any) => HookResult
  'generate:page': (page: { route: string, path: string, html: string, errors: any[] }) => HookResult
  'generate:routeCreated': (route: string, path: string, errors: any[]) => HookResult
  'generate:routeFailed': (route: string, errors: any[]) => HookResult
  
  // Server and rendering
  'render:errorMiddleware': (app: any) => HookResult
  'render:route': (url: string, result: any, context: any) => HookResult
  'server:devHandler': (handler: EventHandler) => HookResult
  'server:devMiddleware': (middleware: any) => HookResult
}

Hook Categories

Lifecycle Hooks

Core application lifecycle events.

interface LifecycleHooks {
  'ready': (nuxt: Nuxt) => HookResult
  'close': (nuxt: Nuxt) => HookResult  
  'restart': (options?: { hard?: boolean }) => HookResult
  'modules:before': () => HookResult
  'modules:done': () => HookResult
}

Build Hooks

Build process and bundler integration.

interface BuildHooks {
  'build:before': (nuxt: Nuxt, buildOptions: any) => HookResult
  'build:done': (nuxt: Nuxt) => HookResult
  'build:manifest': (manifest: Manifest) => HookResult
  'webpack:config': (webpackConfigs: Configuration[]) => HookResult
  'vite:extend': (viteBuildContext: { nuxt: Nuxt, config: ViteConfig }) => HookResult
}

Development Hooks

Development server and hot module replacement.

interface DevHooks {
  'dev:ssr-logs': (logs: any[]) => HookResult
  'webpack:change': (shortPath: string) => HookResult
  'vite:serverCreated': (viteServer: ViteDevServer, env: { isClient: boolean, isServer: boolean }) => HookResult
  'server:devHandler': (handler: EventHandler) => HookResult
}

Hook Usage Patterns

In Nuxt Configuration

import type { NuxtHooks } from '@nuxt/schema';

export default defineNuxtConfig({
  hooks: {
    'ready': async (nuxt) => {
      console.log('Nuxt is ready!');
    },
    
    'build:before': async (nuxt, buildOptions) => {
      // Modify build options before build starts
      console.log('Starting build process');
    },
    
    'components:extend': async (components) => {
      // Modify component registration
      components.push({
        pascalName: 'MyCustomComponent',
        kebabName: 'my-custom-component',
        export: 'default',
        filePath: '~/components/custom/MyComponent.vue',
        shortPath: 'components/custom/MyComponent.vue',
        chunkName: 'components/my-custom-component',
        prefetch: false,
        preload: false
      });
    },
    
    'imports:extend': async (imports) => {
      // Add custom auto-imports
      imports.push({
        name: 'myUtility',
        from: '~/utils/my-utility'
      });
    }
  } satisfies Partial<NuxtHooks>
});

In Nuxt Modules

import type { NuxtModule, NuxtHooks } from '@nuxt/schema';

const myModule: NuxtModule = {
  meta: {
    name: 'my-module'
  },
  setup(options, nuxt) {
    // Hook into build process
    nuxt.hook('build:before', async () => {
      console.log('Module preparing for build');
    });
    
    // Extend webpack configuration
    nuxt.hook('webpack:config', async (configs) => {
      for (const config of configs) {
        config.resolve = config.resolve || {};
        config.resolve.alias = {
          ...config.resolve.alias,
          '@my-module': path.resolve(__dirname, './runtime')
        };
      }
    });
    
    // Add custom pages
    nuxt.hook('pages:extend', async (pages) => {
      pages.push({
        name: 'admin-dashboard',
        path: '/admin',
        file: path.resolve(__dirname, './pages/admin.vue')
      });
    });
    
    // Register components
    nuxt.hook('components:dirs', async (dirs) => {
      dirs.push({
        path: path.resolve(__dirname, './components'),
        prefix: 'MyModule'
      });
    });
  }
};

Hook Utilities

// Type-safe hook registration
function registerHooks(nuxt: Nuxt, hooks: Partial<NuxtHooks>) {
  for (const [name, handler] of Object.entries(hooks)) {
    nuxt.hook(name as keyof NuxtHooks, handler);
  }
}

// Hook middleware pattern
function createHookMiddleware<T extends keyof NuxtHooks>(
  hookName: T,
  middleware: (args: Parameters<NuxtHooks[T]>) => void
) {
  return (nuxt: Nuxt) => {
    nuxt.hook(hookName, (...args) => {
      middleware(args);
    });
  };
}

Advanced Hook Patterns

// Conditional hook registration
const myModule: NuxtModule = {
  setup(options, nuxt) {
    // Only register hooks in development
    if (nuxt.options.dev) {
      nuxt.hook('webpack:change', async (shortPath) => {
        console.log(`File changed: ${shortPath}`);
      });
      
      nuxt.hook('dev:ssr-logs', async (logs) => {
        // Process development logs
        logs.forEach(log => console.log(log));
      });
    }
    
    // Build-specific hooks
    nuxt.hook('build:before', async () => {
      // Prepare build assets
      await generateBuildAssets();
    });
    
    // Async hook with error handling
    nuxt.hook('ready', async () => {
      try {
        await initializeExternalService();
      } catch (error) {
        console.error('Failed to initialize service:', error);
      }
    });
  }
};

Hook Context and State

// Sharing state between hooks
const moduleState = {
  initialized: false,
  components: new Set<string>()
};

nuxt.hook('components:extend', async (components) => {
  components.forEach(component => {
    moduleState.components.add(component.pascalName);
  });
});

nuxt.hook('ready', async () => {
  moduleState.initialized = true;
  console.log(`Registered ${moduleState.components.size} components`);
});

The hook system provides a powerful way to extend Nuxt's functionality at every stage of the application lifecycle, from initial setup through build time to runtime, all with complete type safety.

Install with Tessl CLI