Nuxt/docs/3.api/6.advanced/1.hooks.md

11 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:loading:start - Client Called when the setup() of the new page is running.
page:loading:end - Client Called after page:finish
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.
pages:routerOptions { files: Array<{ path: string, optional?: boolean }> } Called when resolving router.options files.
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)

See Nitro for all available hooks.

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
close - Called when Nitro is closed. -
error error, { event? } Called when an error occurs. error, event
request event Called when a request is received. event
beforeResponse event, { body } Called before sending the response. event, unknown
afterResponse event, { body } Called after sending the response. event, unknown