生命周期钩子
Nuxt 提供了一套强大的钩子系统,可以通过钩子扩展几乎各个方面。
阅读更多
应用钩子(运行时)
查看 app 源码 获取所有可用的钩子。
| 钩子 | 参数 | 环境 | 描述 |
|---|---|---|---|
app:created | vueApp | 服务端 & 客户端 | 在创建初始 vueApp 实例时调用。 |
app:error | err | 服务端 & 客户端 | 当发生致命错误时调用。 |
app:error:cleared | { redirect? } | 服务端 & 客户端 | 当致命错误被清除时调用。 |
vue:setup | - | 服务端 & 客户端 | 在 Nuxt 根组件的 setup 初始化时调用。该回调必须是同步的。 |
vue:error | err, target, info | 服务端 & 客户端 | 当 Vue 错误传播到根组件时调用。了解更多。 |
app:rendered | renderContext | 服务端 | SSR 渲染完成时调用。 |
app:redirected | - | 服务端 | SSR 重定向之前调用。 |
app:beforeMount | vueApp | 客户端 | 在挂载应用之前调用,仅在客户端调用。 |
app:mounted | vueApp | 客户端 | Vue 应用在浏览器中初始化并挂载完成时调用。 |
app:suspense:resolve | appComponent | 客户端 | Suspense resolve 事件触发时。 |
app:manifest:update | { id, timestamp } | 客户端 | 检测到应用有更新版本时调用。 |
app:data:refresh | keys? | 客户端 | 调用 refreshNuxtData 时调用。 |
link:prefetch | to | 客户端 | 当 <NuxtLink> 被观察到要被预取时调用。 |
page:start | pageComponent? | 客户端 | 在 NuxtPage 内部的 Suspense pending 事件时调用。 |
page:finish | pageComponent? | 客户端 | 在 NuxtPage 内部的 Suspense resolved 事件时调用。 |
page:loading:start | - | 客户端 | 路由导航开始时(解析之前)或页面 key 变化时调用。若页面被复用(例如在 definePageMeta 中使用静态 key),即使页面的 setup() 没有重新运行,该钩子也可能触发。 |
page:loading:end | - | 客户端 | 在 page:finish 之后调用。 |
page:transition:finish | pageComponent? | 客户端 | 页面过渡 onAfterLeave 事件之后。 |
dev:ssr-logs | logs | 客户端 | 当一组服务端日志被传递到客户端时调用(如果启用了 features.devLogs)。 |
page:view-transition:start | transition | 客户端 | 在调用 document.startViewTransition 后调用(当 experimental viewTransition 支持启用 时)。transition 参数是一个带有 types 属性的 ViewTransition 对象(ViewTransitionTypeSet),可被读取或修改。 |
Nuxt 钩子(构建时)
查看 schema 源码 获取所有可用的钩子。
| 钩子 | 参数 | 描述 |
|---|---|---|
kit:compatibility | compatibility, issues | 允许扩展兼容性检查。 |
ready | nuxt | 在 Nuxt 初始化之后调用,此时 Nuxt 实例已准备就绪可以工作。 |
close | nuxt | 在 Nuxt 实例优雅关闭时调用。 |
restart | { hard?: boolean } | 调用以重启当前 Nuxt 实例。 |
modules:before | - | 在 Nuxt 初始化期间、安装用户模块之前调用。 |
modules:done | - | 在 Nuxt 初始化期间、安装用户模块之后调用。 |
app:resolve | app | 在解析 app 实例之后调用。 |
app:templates | app | 在 NuxtApp 生成期间调用,允许自定义、修改或向构建目录(虚拟文件或写入 .nuxt)添加新文件。 |
app:templatesGenerated | app | 在模板被编译到 虚拟文件系统(vfs)之后调用。 |
build:before | - | 在 Nuxt 打包构建器之前调用。 |
build:done | - | 在 Nuxt 打包构建器完成之后调用。 |
build:manifest | manifest | 在 Vite 和 webpack 构建 manifest 期间调用。这允许自定义 Nitro 将用于渲染最终 HTML 中 <script> 和 <link> 标签的 manifest。 |
builder:generateApp | options | 在生成应用之前调用。 |
builder:watch | event, path | 在开发期间的构建时调用,当监视器检测到项目中的文件或目录发生变化时。 |
pages:extend | pages | 从文件系统扫描页面路由之后调用。 |
pages:resolved | pages | 在使用扫描到的元数据进行增强之后调用。 |
pages:routerOptions | { files: Array<{ path: string, optional?: boolean }> } | 在解析 router.options 文件时调用。数组中的后续项会覆盖前面的项。 |
server:devHandler | handler | 在 Nitro 开发服务器上注册 dev 中间件时调用。 |
imports:sources | presets | 在 setup 时调用,允许模块扩展 sources。 |
imports:extend | imports | 在 setup 时调用,允许模块扩展 imports。 |
imports:context | context | 在创建 unimport 上下文时调用。 |
imports:dirs | dirs | 允许扩展导入目录。 |
components:dirs | dirs | 在 app:resolve 中调用,允许扩展被扫描以进行自动导入组件的目录。 |
components:extend | components | 允许扩展新组件。 |
nitro:config | nitroConfig | 在初始化 Nitro 之前调用,允许自定义 Nitro 的配置。 |
nitro:init | nitro | 在 Nitro 初始化之后调用,允许注册 Nitro 钩子并直接与 Nitro 交互。 |
nitro:build:before | nitro | 在构建 Nitro 实例之前调用。 |
nitro:build:public-assets | nitro | 在复制公共资源之后调用。允许在 Nitro 服务器构建之前修改公共资源。 |
prerender:routes | ctx | 允许扩展要预渲染的路由。 |
build:error | error | 在构建时发生错误时调用。 |
prepare:types | options | 在 @nuxt/cli 写入 TypeScript 配置文件(.nuxt/tsconfig.app.json、.nuxt/tsconfig.server.json 等)和 .nuxt/nuxt.d.ts 之前调用,允许在 nuxt.d.ts 中添加自定义引用和声明,或直接修改生成配置中的 options。 |
listen | listenerServer, listener | 在开发服务器加载时调用。 |
schema:extend | schemas | 允许扩展默认 schema。 |
schema:resolved | schema | 允许扩展已解析的 schema。 |
schema:beforeWrite | schema | 在写入给定 schema 之前调用。 |
schema:written | - | 在 schema 写入之后调用。 |
vite:extend | viteBuildContext | 允许扩展 Vite 默认上下文。 |
vite:extendConfig | viteInlineConfig, env | 允许扩展 Vite 默认配置。在 Nuxt 5+ 中已弃用。 在 Nuxt 5 中,它作用于共享配置,而不是独立的 client/server 配置。 |
vite:configResolved | viteInlineConfig, env | 允许读取已解析的 Vite 配置。在 Nuxt 5+ 中已弃用。 在 Nuxt 5 中,它作用于共享配置,而不是独立的 client/server 配置。 |
vite:serverCreated | viteServer, env | 在创建 Vite 服务器时调用。 |
vite:compiled | - | 在 Vite 服务器编译之后调用。 |
webpack:config | webpackConfigs | 在配置 webpack 编译器之前调用。 |
webpack:configResolved | webpackConfigs | 允许读取已解析的 webpack 配置。 |
webpack:compile | options | 在编译之前调用。 |
webpack:compiled | options | 在资源加载之后调用。 |
webpack:change | shortPath | 在 WebpackBar 的 change 时调用。 |
webpack:error | - | 在 WebpackBar 有错误时于 done 时调用。 |
webpack:done | - | 在 WebpackBar 的 allDone 时调用。 |
webpack:progress | statesArray | 在 WebpackBar 的 progress 时调用。 |
Nitro 应用钩子(运行时,服务端)
参见 Nitro 获取所有可用的钩子。
| 钩子 | 参数 | 描述 | 类型 |
|---|---|---|---|
dev:ssr-logs | { path, logs } | 服务端 | 在请求周期结束时调用,传入一组服务端日志。 |
render:response | response, { event } | 在发送响应之前调用。 | response, event |
render:html | html, { event } | 在构建 HTML 之前调用。 | html, event |
render:island | islandResponse, { event, islandContext } | 在构建 island HTML 之前调用。 | islandResponse, event, islandContext |
close | - | 在 Nitro 关闭时调用。 | - |
error | error, { event? } | 在发生错误时调用。 | error, event |
request | event | 在收到请求时调用。 | event |
beforeResponse | event, { body } | 在发送响应之前调用。 | event, unknown |
afterResponse | event, { body } | 在发送响应之后调用。 | event, unknown |