跳到主要内容

生命周期钩子

Nuxt 提供了一套强大的钩子系统,可以通过钩子扩展几乎各个方面。

阅读更多

应用钩子(运行时)

查看 app 源码 获取所有可用的钩子。

钩子参数环境描述
app:createdvueApp服务端 & 客户端在创建初始 vueApp 实例时调用。
app:errorerr服务端 & 客户端当发生致命错误时调用。
app:error:cleared{ redirect? }服务端 & 客户端当致命错误被清除时调用。
vue:setup-服务端 & 客户端在 Nuxt 根组件的 setup 初始化时调用。该回调必须是同步的。
vue:errorerr, target, info服务端 & 客户端当 Vue 错误传播到根组件时调用。了解更多
app:renderedrenderContext服务端SSR 渲染完成时调用。
app:redirected-服务端SSR 重定向之前调用。
app:beforeMountvueApp客户端在挂载应用之前调用,仅在客户端调用。
app:mountedvueApp客户端Vue 应用在浏览器中初始化并挂载完成时调用。
app:suspense:resolveappComponent客户端Suspense resolve 事件触发时。
app:manifest:update{ id, timestamp }客户端检测到应用有更新版本时调用。
app:data:refreshkeys?客户端调用 refreshNuxtData 时调用。
link:prefetchto客户端<NuxtLink> 被观察到要被预取时调用。
page:startpageComponent?客户端NuxtPage 内部的 Suspense pending 事件时调用。
page:finishpageComponent?客户端NuxtPage 内部的 Suspense resolved 事件时调用。
page:loading:start-客户端路由导航开始时(解析之前)或页面 key 变化时调用。若页面被复用(例如在 definePageMeta 中使用静态 key),即使页面的 setup() 没有重新运行,该钩子也可能触发。
page:loading:end-客户端page:finish 之后调用。
page:transition:finishpageComponent?客户端页面过渡 onAfterLeave 事件之后。
dev:ssr-logslogs客户端当一组服务端日志被传递到客户端时调用(如果启用了 features.devLogs)。
page:view-transition:starttransition客户端在调用 document.startViewTransition 后调用(当 experimental viewTransition 支持启用 时)。transition 参数是一个带有 types 属性的 ViewTransition 对象(ViewTransitionTypeSet),可被读取或修改。

Nuxt 钩子(构建时)

查看 schema 源码 获取所有可用的钩子。

钩子参数描述
kit:compatibilitycompatibility, issues允许扩展兼容性检查。
readynuxt在 Nuxt 初始化之后调用,此时 Nuxt 实例已准备就绪可以工作。
closenuxt在 Nuxt 实例优雅关闭时调用。
restart{ hard?: boolean }调用以重启当前 Nuxt 实例。
modules:before-在 Nuxt 初始化期间、安装用户模块之前调用。
modules:done-在 Nuxt 初始化期间、安装用户模块之后调用。
app:resolveapp在解析 app 实例之后调用。
app:templatesappNuxtApp 生成期间调用,允许自定义、修改或向构建目录(虚拟文件或写入 .nuxt)添加新文件。
app:templatesGeneratedapp在模板被编译到 虚拟文件系统(vfs)之后调用。
build:before-在 Nuxt 打包构建器之前调用。
build:done-在 Nuxt 打包构建器完成之后调用。
build:manifestmanifest在 Vite 和 webpack 构建 manifest 期间调用。这允许自定义 Nitro 将用于渲染最终 HTML 中 <script><link> 标签的 manifest。
builder:generateAppoptions在生成应用之前调用。
builder:watchevent, path在开发期间的构建时调用,当监视器检测到项目中的文件或目录发生变化时。
pages:extendpages从文件系统扫描页面路由之后调用。
pages:resolvedpages在使用扫描到的元数据进行增强之后调用。
pages:routerOptions{ files: Array<{ path: string, optional?: boolean }> }在解析 router.options 文件时调用。数组中的后续项会覆盖前面的项。
server:devHandlerhandler在 Nitro 开发服务器上注册 dev 中间件时调用。
imports:sourcespresets在 setup 时调用,允许模块扩展 sources。
imports:extendimports在 setup 时调用,允许模块扩展 imports。
imports:contextcontext在创建 unimport 上下文时调用。
imports:dirsdirs允许扩展导入目录。
components:dirsdirsapp:resolve 中调用,允许扩展被扫描以进行自动导入组件的目录。
components:extendcomponents允许扩展新组件。
nitro:confignitroConfig在初始化 Nitro 之前调用,允许自定义 Nitro 的配置。
nitro:initnitro在 Nitro 初始化之后调用,允许注册 Nitro 钩子并直接与 Nitro 交互。
nitro:build:beforenitro在构建 Nitro 实例之前调用。
nitro:build:public-assetsnitro在复制公共资源之后调用。允许在 Nitro 服务器构建之前修改公共资源。
prerender:routesctx允许扩展要预渲染的路由。
build:errorerror在构建时发生错误时调用。
prepare:typesoptions@nuxt/cli 写入 TypeScript 配置文件(.nuxt/tsconfig.app.json.nuxt/tsconfig.server.json 等)和 .nuxt/nuxt.d.ts 之前调用,允许在 nuxt.d.ts 中添加自定义引用和声明,或直接修改生成配置中的 options。
listenlistenerServer, listener在开发服务器加载时调用。
schema:extendschemas允许扩展默认 schema。
schema:resolvedschema允许扩展已解析的 schema。
schema:beforeWriteschema在写入给定 schema 之前调用。
schema:written-在 schema 写入之后调用。
vite:extendviteBuildContext允许扩展 Vite 默认上下文。
vite:extendConfigviteInlineConfig, env允许扩展 Vite 默认配置。在 Nuxt 5+ 中已弃用。 在 Nuxt 5 中,它作用于共享配置,而不是独立的 client/server 配置。
vite:configResolvedviteInlineConfig, env允许读取已解析的 Vite 配置。在 Nuxt 5+ 中已弃用。 在 Nuxt 5 中,它作用于共享配置,而不是独立的 client/server 配置。
vite:serverCreatedviteServer, env在创建 Vite 服务器时调用。
vite:compiled-在 Vite 服务器编译之后调用。
webpack:configwebpackConfigs在配置 webpack 编译器之前调用。
webpack:configResolvedwebpackConfigs允许读取已解析的 webpack 配置。
webpack:compileoptions在编译之前调用。
webpack:compiledoptions在资源加载之后调用。
webpack:changeshortPath在 WebpackBar 的 change 时调用。
webpack:error-在 WebpackBar 有错误时于 done 时调用。
webpack:done-在 WebpackBar 的 allDone 时调用。
webpack:progressstatesArray在 WebpackBar 的 progress 时调用。

Nitro 应用钩子(运行时,服务端)

参见 Nitro 获取所有可用的钩子。

钩子参数描述类型
dev:ssr-logs{ path, logs }服务端在请求周期结束时调用,传入一组服务端日志。
render:responseresponse, { event }在发送响应之前调用。response, event
render:htmlhtml, { event }在构建 HTML 之前调用。html, event
render:islandislandResponse, { event, islandContext }在构建 island HTML 之前调用。islandResponse, event, islandContext
close-在 Nitro 关闭时调用。-
errorerror, { event? }在发生错误时调用。error, event
requestevent在收到请求时调用。event
beforeResponseevent, { body }在发送响应之前调用。event, unknown
afterResponseevent, { body }在发送响应之后调用。event, unknown