mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-14 10:04:05 +00:00
64 lines
2.1 KiB
Markdown
64 lines
2.1 KiB
Markdown
|
# 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
|
||
|
|
|
||
|
|
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
|
||
|
|
|
||
|
|
```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://v3.vuejs.org/guide/migration/suspense.html) resolved event
|
||
|
|
`page:start` | `pageComponent` | On [Suspense](https://v3.vuejs.org/guide/migration/suspense.html) pending event
|
||
|
|
`page:finish` | `pageComponent` | On [Suspense](https://v3.vuejs.org/guide/migration/suspense.html) resolved event
|
||
|
|
`meta:register` | `metaRenderers` | (internal)
|
||
|
|
`vue:setup` | - | (internal)
|