生命周期钩子

Nuxt 提供了一个强大的钩子系统,通过钩子来扩展几乎每一个方面。
Read more in Docs > Guide > Going Further > Hooks.

应用钩子 (运行时)

查看 应用源代码 以了解所有可用钩子。

钩子参数环境描述
app:createdvueApp服务器 & 客户端当初始 vueApp 实例被创建时调用。
app:errorerr服务器 & 客户端当发生致命错误时调用。
app:error:cleared{ redirect? }服务器 & 客户端当致命错误发生时调用。
vue:setup-服务器 & 客户端当 Nuxt 根的设置被初始化时调用。此回调必须是同步的。
vue:errorerr, target, info服务器 & 客户端当 Vue 错误传播到根组件时调用。 了解更多
app:renderedrenderContext服务器当 SSR 渲染完成时调用。
app:redirected-服务器在 SSR 重定向之前调用。
app:beforeMountvueApp客户端在挂载应用之前调用,仅在客户端调用。
app:mountedvueApp客户端当 Vue 应用在浏览器中初始化并挂载时调用。
app:suspense:resolveappComponent客户端Suspense 解决事件时调用。
app:manifest:update{ id, timestamp }客户端当检测到您的应用有更新版本时调用。
app:data:refreshkeys?客户端当调用 refreshNuxtData 时调用。
link:prefetchto客户端当观察到 <NuxtLink> 被预取时调用。
page:startpageComponent?客户端Suspense 待定事件时调用。
page:finishpageComponent?客户端Suspense 解决事件时调用。
page:loading:start-客户端当新页面的 setup() 正在运行时调用。
page:loading:end-客户端page:finish 之后调用。
page:transition:finishpageComponent?客户端在页面转换的 onAfterLeave 事件后调用。
dev:ssr-logslogs客户端当有一组服务端日志传递到客户端时调用(如果启用了 features.devLogs)。
page:view-transition:starttransition客户端当调用 document.startViewTransition 时调用,前提是 实验性视图转换支持已启用

Nuxt 钩子 (构建时)

查看 架构源代码 以了解所有可用钩子。

钩子参数描述
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 生成清单时调用。这允许自定义 Nitro 用于在最终 HTML 中渲染 <script><link> 标签的清单。
builder:generateAppoptions在生成应用之前调用。
builder:watchevent, path在开发阶段构建时,监视器发现项目中的文件或目录变化时调用。
pages:extendpages在从文件系统扫描页面路由后调用。
pages:resolvedpages在页面路由增加扫描的元数据后调用。
pages:routerOptions{ files: Array<{ path: string, optional?: boolean }> }在解析 router.options 文件时调用。数组中的后项会覆盖前面的项。
server:devHandlerhandler当在 Nitro 开发服务器上注册开发中间件时调用。
imports:sourcespresets在设置时调用,允许模块扩展源。
imports:extendimports在设置时调用,允许模块扩展导入。
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在 Nuxi 写入 .nuxt/tsconfig.json.nuxt/nuxt.d.ts 之前调用,允许添加自定义引用和声明到 nuxt.d.ts,或直接修改 tsconfig.json 中的选项。
listenlistenerServer, listener当开发服务器正在加载时调用。
schema:extendschemas允许扩展默认架构。
schema:resolvedschema允许扩展解析的架构。
schema:beforeWriteschema在写入给定架构之前调用。
schema:written-在架构写入后调用。
vite:extendviteBuildContext允许扩展 Vite 默认上下文。
vite:extendConfigviteInlineConfig, env允许扩展 Vite 默认配置。
vite:configResolvedviteInlineConfig, env允许读取解析后的 Vite 配置。
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 }在发送响应之前调用。responseevent
render:htmlhtml, { event }在构造 HTML 之前调用。htmlevent
render:islandislandResponse, { event, islandContext }在构造岛屿 HTML 之前调用。islandResponseeventislandContext
close-在 Nitro 关闭时调用。-
errorerror, { event? }当发生错误时调用。errorevent
requestevent当接收到请求时调用。event
beforeResponseevent, { body }在发送响应之前调用。event,未知
afterResponseevent, { body }在发送响应之后调用。event,未知