Learn Nuxt with a Collection of 100+ Tips!

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.

HookArgumentsEnvironmentDescription
app:createdvueAppServer & ClientCalled when initial vueApp instance is created.
app:errorerrServer & ClientCalled when a fatal error occurs.
app:error:cleared{ redirect? }Server & ClientCalled when a fatal error occurs.
app:data:refreshkeys?Server & Client(internal)
vue:setup-Server & Client(internal)
vue:errorerr, target, infoServer & ClientCalled when a vue error propagates to the root component. Learn More.
app:renderedrenderContextServerCalled when SSR rendering is done.
app:redirected-ServerCalled before SSR redirection.
app:beforeMountvueAppClientCalled before mounting the app, called only on client side.
app:mountedvueAppClientCalled when Vue app is initialized and mounted in browser.
app:suspense:resolveappComponentClientOn Suspense resolved event.
app:manifest:update{ id, timestamp }ClientCalled when there is a newer version of your app detected.
link:prefetchtoClientCalled when a <NuxtLink> is observed to be prefetched.
page:startpageComponent?ClientCalled on Suspense pending event.
page:finishpageComponent?ClientCalled on Suspense resolved event.
page:loading:start-ClientCalled when the setup() of the new page is running.
page:loading:end-ClientCalled after page:finish
page:transition:finishpageComponent?ClientAfter page transition onAfterLeave event.
dev:ssr-logslogsClientCalled with an array of server-side logs that have been passed to the client (if features.devLogs is enabled).
page:view-transition:starttransitionClientCalled after document.startViewTransition is called when experimental viewTransition support is enabled.

Nuxt Hooks (build time)

Check the schema source code for all available hooks.

HookArgumentsDescription
kit:compatibilitycompatibility, issuesAllows extending compatibility checks.
readynuxtCalled after Nuxt initialization, when the Nuxt instance is ready to work.
closenuxtCalled 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:resolveappCalled after resolving the app instance.
app:templatesappCalled during NuxtApp generation, to allow customizing, modifying or adding new files to the build directory (either virtually or to written to .nuxt).
app:templatesGeneratedappCalled 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:manifestmanifestCalled 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:generateAppoptionsCalled before generating the app.
builder:watchevent, pathCalled at build time in development when the watcher spots a change to a file or directory in the project.
pages:extendpagesCalled after pages routes are resolved.
pages:routerOptions{ files: Array<{ path: string, optional?: boolean }> }Called when resolving router.options files. Later items in the array override earlier ones.
server:devHandlerhandlerCalled when the dev middleware is being registered on the Nitro dev server.
imports:sourcespresetsCalled at setup allowing modules to extend sources.
imports:extendimportsCalled at setup allowing modules to extend imports.
imports:contextcontextCalled when the unimport context is created.
imports:dirsdirsAllows extending import directories.
components:dirsdirsCalled within app:resolve allowing to extend the directories that are scanned for auto-importable components.
components:extendcomponentsAllows extending new components.
nitro:confignitroConfigCalled before initializing Nitro, allowing customization of Nitro's configuration.
nitro:initnitroCalled after Nitro is initialized, which allows registering Nitro hooks and interacting directly with Nitro.
nitro:build:beforenitroCalled before building the Nitro instance.
nitro:build:public-assetsnitroCalled after copying public assets. Allows modifying public assets before Nitro server is built.
prerender:routesctxAllows extending the routes to be pre-rendered.
build:errorerrorCalled when an error occurs at build time.
prepare:typesoptionsCalled 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
listenlistenerServer, listenerCalled when the dev server is loading.
schema:extendschemasAllows extending default schemas.
schema:resolvedschemaAllows extending resolved schema.
schema:beforeWriteschemaCalled before writing the given schema.
schema:written-Called after the schema is written.
vite:extendviteBuildContextAllows to extend Vite default context.
vite:extendConfigviteInlineConfig, envAllows to extend Vite default config.
vite:configResolvedviteInlineConfig, envAllows to read the resolved Vite config.
vite:serverCreatedviteServer, envCalled when the Vite server is created.
vite:compiled-Called after Vite server is compiled.
webpack:configwebpackConfigsCalled before configuring the webpack compiler.
webpack:configResolvedwebpackConfigsAllows to read the resolved webpack config.
webpack:compileoptionsCalled right before compilation.
webpack:compiledoptionsCalled after resources are loaded.
webpack:changeshortPathCalled on change on WebpackBar.
webpack:error-Called on done if has errors on WebpackBar.
webpack:done-Called on allDone on WebpackBar.
webpack:progressstatesArrayCalled on progress on WebpackBar.

Nitro App Hooks (runtime, server-side)

See Nitro for all available hooks.

HookArgumentsDescriptionTypes
dev:ssr-logs{ path, logs }ServerCalled at the end of a request cycle with an array of server-side logs.
render:responseresponse, { event }Called before sending the response.response, event
render:htmlhtml, { event }Called before constructing the HTML.html, event
render:islandislandResponse, { event, islandContext }Called before constructing the island HTML.islandResponse, event, islandContext
close-Called when Nitro is closed.-
errorerror, { event? }Called when an error occurs.error, event
requesteventCalled when a request is received.event
beforeResponseevent, { body }Called before sending the response.event, unknown
afterResponseevent, { body }Called after sending the response.event, unknown