mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-30 01:17:16 +00:00
f26a801775
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Daniel Roe <daniel@roe.dev>
9.4 KiB
9.4 KiB
title | description |
---|---|
Lifecycle Hooks | Nuxt provides a powerful hooking system to expand almost every aspect using hooks. |
:read-more{to="/docs/guide/going-further/hooks"}
App Hooks (runtime)
Check the app source code for all available hooks.
Hook | Arguments | Environment | Description |
---|---|---|---|
app:created |
vueApp |
Server & Client | Called when initial vueApp instance is created. |
app:error |
err |
Server & Client | Called when a fatal error occurs. |
app:error:cleared |
{ redirect? } |
Server & Client | Called when a fatal error occurs. |
app:data:refresh |
keys? |
Server & Client | (internal) |
vue:setup |
- | Server & Client | (internal) |
vue:error |
err, target, info |
Server & Client | Called when a vue error propagates to the root component. Learn More. |
app:rendered |
renderContext |
Server | Called when SSR rendering is done. |
app:redirected |
- | Server | Called before SSR redirection. |
app:beforeMount |
vueApp |
Client | Called before mounting the app, called only on client side. |
app:mounted |
vueApp |
Client | Called when Vue app is initialized and mounted in browser. |
app:suspense:resolve |
appComponent |
Client | On Suspense resolved event. |
link:prefetch |
to |
Client | Called when a <NuxtLink> is observed to be prefetched. |
page:start |
pageComponent? |
Client | Called on Suspense pending event. |
page:finish |
pageComponent? |
Client | Called on Suspense resolved event. |
page:transition:finish |
pageComponent? |
Client | After page transition onAfterLeave event. |
Nuxt Hooks (build time)
Check the schema source code for all available hooks.
Hook | Arguments | Description |
---|---|---|
kit:compatibility |
compatibility, issues |
Allows extending compatibility checks. |
ready |
nuxt |
Called after Nuxt initialization, when the Nuxt instance is ready to work. |
close |
nuxt |
Called when Nuxt instance is gracefully closing. |
restart |
{ hard?: boolean } |
To be called to restart the current Nuxt instance. |
modules:before |
- | Called during Nuxt initialization, before installing user modules. |
modules:done |
- | Called during Nuxt initialization, after installing user modules. |
app:resolve |
app |
Called after resolving the app instance. |
app:templates |
app |
Called during NuxtApp generation, to allow customizing, modifying or adding new files to the build directory (either virtually or to written to .nuxt ). |
app:templatesGenerated |
app |
Called after templates are compiled into the virtual file system (vfs). |
build:before |
- | Called before Nuxt bundle builder. |
build:done |
- | Called after Nuxt bundle builder is complete. |
build:manifest |
manifest |
Called during the manifest build by Vite and webpack. This allows customizing the manifest that Nitro will use to render <script> and <link> tags in the final HTML. |
builder:generateApp |
options |
Called before generating the app. |
builder:watch |
event, path |
Called at build time in development when the watcher spots a change to a file or directory in the project. |
pages:extend |
pages |
Called after pages routes are resolved. |
server:devHandler |
handler |
Called when the dev middleware is being registered on the Nitro dev server. |
imports:sources |
presets |
Called at setup allowing modules to extend sources. |
imports:extend |
imports |
Called at setup allowing modules to extend imports. |
imports:context |
context |
Called when the unimport context is created. |
imports:dirs |
dirs |
Allows extending import directories. |
components:dirs |
dirs |
Called within app:resolve allowing to extend the directories that are scanned for auto-importable components. |
components:extend |
components |
Allows extending new components. |
nitro:config |
nitroConfig |
Called before initializing Nitro, allowing customization of Nitro's configuration. |
nitro:init |
nitro |
Called after Nitro is initialized, which allows registering Nitro hooks and interacting directly with Nitro. |
nitro:build:before |
nitro |
Called before building the Nitro instance. |
nitro:build:public-assets |
nitro |
Called after copying public assets. Allows modifying public assets before Nitro server is built. |
prerender:routes |
ctx |
Allows extending the routes to be pre-rendered. |
build:error |
error |
Called when an error occurs at build time. |
prepare:types |
options |
Called before Nuxi writes .nuxt/tsconfig.json and .nuxt/nuxt.d.ts , allowing addition of custom references and declarations in nuxt.d.ts , or directly modifying the options in tsconfig.json |
listen |
listenerServer, listener |
Called when the dev server is loading. |
schema:extend |
schemas |
Allows extending default schemas. |
schema:resolved |
schema |
Allows extending resolved schema. |
schema:beforeWrite |
schema |
Called before writing the given schema. |
schema:written |
- | Called after the schema is written. |
vite:extend |
viteBuildContext |
Allows to extend Vite default context. |
vite:extendConfig |
viteInlineConfig, env |
Allows to extend Vite default config. |
vite:configResolved |
viteInlineConfig, env |
Allows to read the resolved Vite config. |
vite:serverCreated |
viteServer, env |
Called when the Vite server is created. |
vite:compiled |
- | Called after Vite server is compiled. |
webpack:config |
webpackConfigs |
Called before configuring the webpack compiler. |
webpack:configResolved |
webpackConfigs |
Allows to read the resolved webpack config. |
webpack:compile |
options |
Called right before compilation. |
webpack:compiled |
options |
Called after resources are loaded. |
webpack:change |
shortPath |
Called on change on WebpackBar. |
webpack:error |
- | Called on done if has errors on WebpackBar. |
webpack:done |
- | Called on allDone on WebpackBar. |
webpack:progress |
statesArray |
Called on progress on WebpackBar. |
Nitro App Hooks (runtime, server-side)
Hook | Arguments | Description | Types |
---|---|---|---|
render:response |
response, { event } |
Called before sending the response. | response, event |
render:html |
html, { event } |
Called before constructing the HTML. | html, event |
render:island |
islandResponse, { event, islandContext } |
Called before constructing the island HTML. | islandResponse, event, islandContext |