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

64 lines
2.1 KiB
Markdown
Raw Normal View History

# Lifecycle Hooks
Nuxt provides a powerful hooking system to expand almost every aspect using hooks powered by [unjs/hookable](https://github.com/unjs/hookable).
## Nuxt Hooks
This hooks are available for [Nuxt Modules](/docs/advanced/modules) and build context.
### Usage with `nuxt.config`
```js [nuxt.config]
export default defineNuxtConfig({
hooks: {
'close': () => { }
}
})
```
### Usage with Nuxt Modules
```js
import { defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup (options, nuxt) {
nuxt.hook('close', async () => { })
})
})
```
### Available hooks
Check the [source code](https://github.com/nuxt/framework/blob/main/packages/schema/src/types/hooks.ts#L55) for all available hooks.
## Runtime Hooks
2022-03-24 11:03:18 +00:00
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.
2022-03-24 11:03:18 +00:00
### Usage with Plugins
```js [plugins/test.ts]
export defineNuxtPlugin(nuxtApp) {
nuxtApp.hook('page:start', () => { })
}
```
### Available hooks
Check the [source code](https://github.com/nuxt/framework/blob/main/packages/nuxt3/src/app/nuxt.ts#L18) 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](https://vuejs.org/guide/built-ins/suspense.html#suspense) resolved event
`page:start` | `pageComponent` | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) pending event
`page:finish` | `pageComponent` | On [Suspense](https://vuejs.org/guide/built-ins/suspense.html#suspense) resolved event
`meta:register` | `metaRenderers` | (internal)
`vue:setup` | - | (internal)