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
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
plugins/test.ts
export defineNuxtPlugin(nuxtApp) {
nuxtApp.hook('page:start', () => { })
}
👉
Learn more about available lifecycle hooks