Hooks

prepare:types

Nuxt hook for TypeScript type configuration

The prepare:types hook is used by Nuxt Umbu to configure TypeScript types and module references, ensuring full IDE support and type safety.

Overview

This hook runs during Nuxt's TypeScript preparation phase and is responsible for:

  • Generating type definitions for the auth instance
  • Adding type references to the TypeScript project
  • Configuring path aliases for module imports
  • Ensuring IDE autocomplete works correctly

What It Does

1. Type Reference Registration

The hook adds the generated umbu.d.ts file to TypeScript references:

nuxt.hook('prepare:types', ({ references, tsConfig }) => {
  references.push({ path: umbuTypes.dst })
})

This ensures TypeScript includes the generated types in your project.

2. Path Alias Configuration

The hook configures TypeScript compiler options to recognize module aliases:

tsConfig.compilerOptions.paths['#auth-utils'] = [runtimeUtilsPath]
tsConfig.compilerOptions.paths['#auth-types'] = [runtimeTypesPath]

This allows you to import from these aliases with full type support:

import { someHelper } from '#auth-utils'
import type { AuthInstance } from '#auth-types'

3. Provider-Specific Types

The hook ensures the correct type definitions are loaded based on your configured provider:

  • Sanctum: Cookie-based authentication types
  • Passport: Token-based authentication types

Generated Types

The hook triggers the generation of umbu.d.ts which includes:

  • AuthInstance interface with all auth methods
  • Provider-specific type definitions
  • Configuration option types
  • State management types

Usage

No manual usage is required - the hook runs automatically during the build process. However, you can benefit from its effects:

IDE Autocomplete

const { $auth } = useNuxtApp()

// Full autocomplete available
$auth.loginWith('passport', { /* ... */ })
$auth.logout('passport')

Type-Safe Imports

// Type-safe imports with aliases
import { useAuthStore } from '#auth-utils'
import type { ModuleOptions } from '#auth-types'

Configuration

The hook behavior is controlled by your module configuration:

// nuxt.config.ts
export default defineNuxtConfig({
  auth: {
    provider: 'sanctum', // or 'passport'
    // ... other options
  }
})

The hook automatically adapts to your provider choice.

Notes

  • The hook runs during Nuxt's build process
  • Generated types are located in .nuxt/types/umbu.d.ts
  • Changes to module configuration require a rebuild to update types
  • The hook is essential for TypeScript support in Nuxt Umbu