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] (/docs/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.

Usage with Modules

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)