Nuxt/docs/content/3.docs/4.advanced/4.hooks.md

Lifecycle Hooks

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

Nuxt Hooks

This hooks are available for Nuxt Modules and build context.

Usage with nuxt.config

export default defineNuxtConfig({
  hooks: {
    'close': () => { }
  }
})

Usage with Nuxt Modules

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async () => { })
  })
})

Available hooks

Check the source code for all available hooks.

Runtime Hooks

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

Usage with Plugins

export defineNuxtPlugin(nuxtApp) {
  nuxtApp.hook('page:start', () => { })
}

Available hooks

Check the source code for all available hooks.

Note: Please note

Hook	Arguments	Description
app:created	vueApp	When initial vueApp instance is created
app:beforeMount	vueApp	Same as app:created
app:mounted	vueApp	When Vue app is initialized and mounted in browser
app:rendered	-	When SSR rendering is done
app:suspense:resolve	appComponent	On Suspense resolved event
page:start	pageComponent	On Suspense pending event
page:finish	pageComponent	On Suspense resolved event
meta:register	metaRenderers	(internal)
vue:setup	-	(internal)