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)
  })
})