生命周期钩子

Nuxt 提供了一套强大的钩子系统，可用于扩展几乎每个方面。

更多信息请参阅文档 > 4 X > 指南 > 深入了解 > 钩子。

应用钩子 (运行时)

查看应用源代码以获取所有可用钩子。

钩子	参数	环境	描述
`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解析事件时调用。
`app:manifest:update`	`{ id, timestamp }`	客户端	当检测到应用有新版本时调用。
`app:data:refresh`	`keys?`	客户端	当调用 `refreshNuxtData` 时调用。
`link:prefetch`	`@BobbieGoede`	客户端	当检测到 `<NuxtLink>` 被预获取时调用。
`page:start`	`pageComponent?`	客户端	在Suspense`NuxtPage` 的 pending 事件内部调用。
`page:finish`	`pageComponent?`	客户端	在Suspense在 `NuxtPage` 的 resolved 事件内部调用。
`page:loading:start`	-	客户端	当新页面的 `setup()` 正在运行时调用。
`page:loading:end`	-	客户端	在 `page:finish` 之后调用。
`page:transition:finish`	`pageComponent?`	客户端	在页面过渡onAfterLeave事件后调用。
`dev:ssr-logs`	`logs`	客户端	当服务器端日志被传递到客户端时调用（如果启用了 `features.devLogs`）。
`page:view-transition:start`	`transition`	客户端	当启用了实验性 viewTransition 支持后，在调用 `document.startViewTransition` 后调用。`transition` 参数是一个`ViewTransition`对象，具有一个可读取或修改的 `types` 属性（`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 开发服务器时调用。
`imports:sources`	`presets`	在 setup 阶段调用，允许模块扩展来源。
`imports:extend`	`imports (导入)`	在 setup 阶段调用，允许模块扩展自动导入。
`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` 中添加自定义引用和声明，或者直接修改生成配置中的选项。
`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 中，此操作作用于共享配置，而非独立的客户端/服务端配置。
`vite:configResolved`	`viteInlineConfig, env`	允许读取解析后的 Vite 配置。在 Nuxt 5+ 中已弃用。在 Nuxt 5 中，此操作作用于共享配置，而非独立的客户端/服务端配置。
`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 }`	在构建岛屿 HTML 之前调用。	islandResponse, event, islandContext
`close`	-	当 Nitro 关闭时调用。	-
`error`	`error, { event? }`	当发生错误时调用。	error, event
`request`	`event`	当收到请求时调用。	event
`beforeResponse`	`event, { body }`	在发送响应之前调用。	event, unknown
`afterResponse`	`event, { body }`	在发送响应后调用。	event, unknown

这有帮助吗？

报告问题或在 GitHub 上编辑此页面

插件

Nuxt Kit 提供了一系列实用工具来帮助您创建和使用插件。您可以使用这些函数为模块添加插件或插件模板。

Import meta

使用 `import.meta` 了解代码的运行环境。