Nuxt/docs/content/2.guide/6.going-further/2.hooks.md
Clément Ollivier 9a0fc57724
docs: update sitemap (#4063)
Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
Co-authored-by: pooya parsa <pyapar@gmail.com>
2022-04-06 07:56:08 +02:00

1013 B

Lifecycle Hooks

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

Nuxt Hooks (build time)

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 () => { })
  })
})

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.

Usage with Plugins

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

::alert{icon=👉} Learn more about available lifecycle hooks ::