Lifecycle Hooks

Nuxt provides a powerful hooking system to expand almost every aspect using hooks.
The hooking system is powered by unjs/hookable.

Nuxt Hooks (Build Time)

These hooks are available for Nuxt Modules and build context.

Within nuxt.config.ts

nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    close: () => { },
  },
})

Within Nuxt Modules

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async () => { })
  },
})
Explore all available Nuxt hooks.

App Hooks (Runtime)

App hooks can be mainly used by Nuxt Plugins to hook into rendering lifecycle but could also be used in Vue composables.

app/plugins/test.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:start', () => {
    /* your code goes here */
  })
})
Explore all available App hooks.

Server Hooks (Runtime)

These hooks are available for server plugins to hook into Nitro's runtime behavior.

~/server/plugins/test.ts
export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    console.log('render:html', html)
    html.bodyAppend.push('<hr>Appended by custom plugin')
  })

  nitroApp.hooks.hook('render:response', (response, { event }) => {
    console.log('render:response', response)
  })
})
Learn more about available Nitro lifecycle hooks.

Adding Custom Hooks

You can define your own custom hooks support by extending Nuxt's hook interfaces.

import type { HookResult } from '@nuxt/schema'

declare module '#app' {
  interface RuntimeNuxtHooks {
    'your-nuxt-runtime-hook': () => HookResult
  }
  interface NuxtHooks {
    'your-nuxt-hook': () => HookResult
  }
}

declare module 'nitropack/types' {
  interface NitroRuntimeHooks {
    'your-nitro-hook': () => void
  }
}