Appearance

Type Declarations ​

File Information ​

  • Path: app/types/api.d.ts, app/types/auth.d.ts
  • Purpose: TypeScript declaration files for global type augmentations
  • Exported From: Not exported (internal declarations)

Overview ​

These declaration files extend TypeScript's global type system to add type definitions for global variables, Nuxt modules, and Vue component properties. They provide type safety for global APIs and module configurations.

Declaration Files ​

API Declarations (api.d.ts) ​

Global type declarations for API client.

typescript
declare global {
  const $api: typeof $fetch
}

Purpose:

  • Declares global $api variable
  • Type is typeof $fetch (Nuxt's fetch function)
  • Available globally without import

Usage:

typescript
// Can use $api directly (if available globally)
const response = await $api('/endpoint')

Auth Declarations (auth.d.ts) ​

Type augmentations for Nuxt auth module and app instance.

typescript
import '@nuxt/schema'

declare module '@nuxt/schema' {
  interface NuxtConfig {
    auth?: import('@sidebase/nuxt-auth').ModuleOptions
  }
  interface NuxtOptions {
    auth?: import('@sidebase/nuxt-auth').ModuleOptions
  }
}

declare module '#app' {
  interface NuxtApp {
    $api: $Fetch
    $cancelAllRequests: () => void
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $api: $Fetch
    $cancelAllRequests: () => void
  }
}

Purpose:

  • Extends NuxtConfig with auth module options
  • Extends NuxtApp with $api and $cancelAllRequests
  • Extends Vue ComponentCustomProperties for component access

Usage:

typescript
// In nuxt.config.ts
export default defineNuxtConfig({
  auth: {
    // Type-safe auth configuration
  }
})

// In components/composables
const { $api, $cancelAllRequests } = useNuxtApp()
// $api and $cancelAllRequests are type-safe

// In Vue components
this.$api('/endpoint') // Type-safe

Module Augmentations ​

Nuxt Schema Module ​

Extends Nuxt configuration types:

typescript
declare module '@nuxt/schema' {
  interface NuxtConfig {
    auth?: ModuleOptions
  }
}

Nuxt App Module ​

Extends Nuxt app instance types:

typescript
declare module '#app' {
  interface NuxtApp {
    $api: $Fetch
    $cancelAllRequests: () => void
  }
}

Vue Component Properties ​

Extends Vue component custom properties:

typescript
declare module 'vue' {
  interface ComponentCustomProperties {
    $api: $Fetch
    $cancelAllRequests: () => void
  }
}

Usage Examples ​

Using Global API ​

typescript
// Type-safe global API usage
const response = await $api('/api/endpoint', {
  method: 'POST',
  body: { data: 'value' }
})

Using Nuxt App Instance ​

typescript
const { $api, $cancelAllRequests } = useNuxtApp()

// Type-safe API calls
const data = await $api('/api/data')

// Type-safe cancellation
$cancelAllRequests()

Using in Vue Components ​

typescript
// Options API
export default {
  methods: {
    async fetchData() {
      // Type-safe
      const data = await this.$api('/api/data')
    }
  }
}

// Composition API
const { $api } = useNuxtApp()
const data = await $api('/api/data')

Nuxt Config ​

typescript
// nuxt.config.ts
export default defineNuxtConfig({
  auth: {
    // Type-safe auth configuration
    // Options from @sidebase/nuxt-auth
  }
})

Notes ​

  • Declaration files use .d.ts extension
  • Not exported from index.ts (internal declarations)
  • Extend global TypeScript types
  • Provide type safety for global variables
  • Module augmentations for Nuxt and Vue
  • No runtime code, only type definitions