Lifecycle Hooks · Nuxt API

Advanced
Lifecycle Hooks

Nuxt provides a powerful hooking system to expand almost every aspect using hooks.

 Read more in 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)

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

Examples

Examples of Nuxt Kit utilities in use.

Import meta

Understand where your code is running using `import.meta`.