生命周期钩子 - Nuxt API - Nuxt 中文文档

Read more in Docs > Guide > Going Further > Hooks.

应用程序钩子（运行时）

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

钩子	参数	环境	描述
`app:created`	`vueApp`	Server Client	在创建初始 `vueApp` 实例时调用。
`app:error`	`err`	Server Client	当发生致命错误时调用。
`app:error:cleared`	`{ redirect? }`	Server Client	当发生致命错误时调用。
`app:data:refresh`	`keys?`	Server Client	(内部)
`vue:setup`	-	Server Client	(内部)
`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	检测到您的应用程序有更新版本时调用。
`link:prefetch`	`to`	Client	当观察到要预取的 `<NuxtLink>` 时调用。
`page:start`	`pageComponent?`	Client	在 Suspense 上调用挂起事件。
`page:finish`	`pageComponent?`	Client	在 Suspense 上调用解析事件。
`page:loading:start`	-	Client	当新页面的 `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` 时被调用。

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 构建清单期间调用。这允许自定义 Nitro 将用于在最终 HTML 中呈现 `<script>` 和 `<link>` 标签的清单。
`builder:generateApp`	`options`	Called before generating the app.
`builder:watch`	`event, path`	Called at build time in development when the watcher spots a change to a file or directory in the project.
`pages:extend`	`pages`	Called after page routes are scanned from the file system.
`pages:resolved`	`pages`	Called after page routes have been augmented with scanned metadata.
`pages:routerOptions`	`{ files: Array<{ path: string, optional?: boolean }> }`	Called when resolving `router.options` files. Later items in the array override earlier ones.
`server:devHandler`	`handler`	Called when the dev middleware is being registered on the Nitro dev server.
`imports:sources`	`presets`	Called at setup allowing modules to extend sources.
`imports:extend`	`imports`	Called at setup allowing modules to extend imports.
`imports:context`	`context`	Called when the unimport context is created.
`imports:dirs`	`dirs`	Allows extending import directories.
`components:dirs`	`dirs`	Called within `app:resolve` allowing to extend the directories that are scanned for auto-importable components.
`components:extend`	`components`	Allows extending new components.
`nitro:config`	`nitroConfig`	Called before initializing Nitro, allowing customization of Nitro's configuration.
`nitro:init`	`nitro`	Called after Nitro is initialized, which allows registering Nitro hooks and interacting directly with Nitro.
`nitro:build:before`	`nitro`	Called before building the Nitro instance.
`nitro:build:public-assets`	`nitro`	Called after copying public assets. Allows modifying public assets before Nitro server is built.
`prerender:routes`	`ctx`	Allows extending the routes to be pre-rendered.
`build:error`	`error`	Called when an error occurs at build time.
`prepare:types`	`options`	Called before Nuxi writes `.nuxt/tsconfig.json` and `.nuxt/nuxt.d.ts`, allowing addition of custom references and declarations in `nuxt.d.ts`, or directly modifying the options in `tsconfig.json`
`listen`	`listenerServer, listener`	Called when the dev server is loading.
`schema:extend`	`schemas`	Allows extending default schemas.
`schema:resolved`	`schema`	Allows extending resolved schema.
`schema:beforeWrite`	`schema`	Called before writing the given schema.
`schema:written`	-	Called after the schema is written.
`vite:extend`	`viteBuildContext`	Allows to extend Vite default context.
`vite:extendConfig`	`viteInlineConfig, env`	Allows to extend Vite default config.
`vite:configResolved`	`viteInlineConfig, env`	Allows to read the resolved Vite config.
`vite:serverCreated`	`viteServer, env`	Called when the Vite server is created.
`vite:compiled`	-	Called after Vite server is compiled.
`webpack:config`	`webpackConfigs`	Called before configuring the webpack compiler.
`webpack:configResolved`	`webpackConfigs`	Allows to read the resolved webpack config.
`webpack:compile`	`options`	Called right before compilation.
`webpack:compiled`	`options`	Called after resources are loaded.
`webpack:change`	`shortPath`	Called on `change` on WebpackBar.
`webpack:error`	-	Called on `done` if has errors on WebpackBar.
`webpack:done`	-	Called on `allDone` on WebpackBar.
`webpack:progress`	`statesArray`	Called on `progress` on WebpackBar.

Nitro App 钩子（运行时、服务端）

查看 Nitro 获取所有可用的钩子。

Hook	Arguments	Description	Types
`dev:ssr-logs`	`{ path, logs }`	Server	Called at the end of a request cycle with an array of server-side logs.
`render:response`	`response, { event }`	Called before sending the response.	response, event
`render:html`	`html, { event }`	Called before constructing the HTML.	html, event
`render:island`	`islandResponse, { event, islandContext }`	Called before constructing the island HTML.	islandResponse, event, islandContext
`close`	-	Called when Nitro is closed.	-
`error`	`error, { event? }`	Called when an error occurs.	error, event
`request`	`event`	Called when a request is received.	event
`beforeResponse`	`event, { body }`	Called before sending the response.	event, unknown
`afterResponse`	`event, { body }`	Called after sending the response.	event, unknown

使用示例

Nuxt Kit 实用程序使用的示例。

导入元数据

使用 import.meta 来理解你的代码运行在什么地方。