v3.17
Nuxt on GitHub

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.

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.

Additional Hooks

Learn more about creating custom hooks in the Events section.