Lifecycle Hooks

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

Nuxt Hooks (build time)

These hooks are available for Nuxt Modules and build context.

Usage with nuxt.config

nuxt.config

  1. export default defineNuxtConfig({
  2. hooks: {
  3. 'close': () => { }
  4. }
  5. })

Usage with Nuxt Modules

  1. import { defineNuxtModule } from '@nuxt/kit'
  2. export default defineNuxtModule({
  3. setup (options, nuxt) {
  4. nuxt.hook('close', async () => { })
  5. })
  6. })

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

plugins/test.ts

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

👉

Learn more about available lifecycle hooks