生命周期钩子

Nuxt 提供了一个强大的钩子系统，可以利用钩子扩展几乎所有方面。

Maschinelle Übersetzung ·0 % geprüft

Weitere Informationen findest du unter Docs > Guide > Going Further > Hooks.

应用钩子（运行时）

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

Hook	Argumente	Umgebung	Beschreibung
`app:created`	`vueApp`	Server & Client	初始 `vueApp` 实例创建时调用。
`app:error`	`err`	Server & Client	发生致命错误时调用。
`app:error:cleared`	`{ redirect? }`	Server & Client	发生致命错误时调用。
`vue:setup`	-	Server & Client	Nuxt 根组件的设置初始化时调用。此回调必须是同步的。
`vue:error`	`err, target, info`	Server & Client	Vue 错误传播到根组件时调用。了解更多。
`app:rendered`	`renderContext`	Server	SSR 渲染完成时调用。
`app:redirected`	-	Server	SSR 重定向之前调用。
`app:beforeMount`	`vueApp`	Client	应用挂载之前调用，仅在客户端调用。
`app:mounted`	`vueApp`	Client	Vue 应用在浏览器中初始化并挂载时调用。
`app:suspense:resolve`	`appComponent`	Client	Suspense 解析完成事件触发时调用。
`app:manifest:update`	`{ id, timestamp }`	Client	检测到应用有更新版本时调用。
`app:data:refresh`	`keys?`	Client	调用 `refreshNuxtData` 时调用。
`link:prefetch`	`to`	Client	观察到 `<NuxtLink>` 即将进行预取时调用。
`page:start`	`pageComponent?`	Client	`NuxtPage` 内的 Suspense 触发 pending 事件时调用。
`page:finish`	`pageComponent?`	Client	`NuxtPage` 内的 Suspense 触发 resolved 事件时调用。
`page:loading:start`	-	Client	路由导航开始时（解析之前）或页面键发生变化时调用。如果页面被复用（例如在 `definePageMeta` 中使用静态 `key`），页面组件的 `setup()` 不会重新运行，此钩子也可能会触发。
`page:loading:end`	-	Client	`page:finish` 之后调用
`page:transition:finish`	`pageComponent?`	Client	页面过渡的 onAfterLeave 事件触发后调用。
`dev:ssr-logs`	`logs`	Client	调用时会传入传递到客户端的服务器端日志数组（如果启用了 `features.devLogs`）。
`page:view-transition:start`	`transition`	Client	调用 `document.startViewTransition` 后调用，前提是已启用 experimental viewTransition 支持。

Nuxt 钩子（构建时）

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

Hook	Argumente	Beschreibung
`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 bundle 构建器运行之前调用。
`build:done`	-	Nuxt bundle 构建器完成后调用。
`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`	在设置期间调用，允许模块扩展来源。
`imports:extend`	`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` 中添加自定义引用和声明，或直接修改生成配置中的选项
`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 以获取所有可用钩子。

Hook	参数	描述	类型
`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 und islandContext
`close`	-	Nitro 关闭时调用。	-
`error`	`error, { event? }`	发生错误时调用。	error, event
`request`	`event`	收到请求时调用。	event
`beforeResponse`	`event, { body }`	发送响应之前调用。	event, 未知
`afterResponse`	`event, { body }`	发送响应之后调用。	event, 未知

Was this helpful?

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

Layers

Nuxt Kit 提供了帮助您处理层及其目录结构的实用工具。

导入 meta

使用 `import.meta` 了解代码运行的位置。