生命週期鉤子 · Nuxt API

在文件 > 指南 > 深入了解 > 鉤子中閱讀更多資訊。

應用程式鉤子（運行時）

請查看應用程式原始碼以取得所有可用的鉤子。

鉤子	參數	環境	說明
`app:created`	`vueApp`	伺服器 & 用戶端	在建立初始 `vueApp` 實例時呼叫。
`app:error`	`err`	伺服器 & 用戶端	當發生嚴重錯誤時呼叫。
`app:error:cleared`	`{ redirect? }`	伺服器 & 用戶端	當發生嚴重錯誤時呼叫。
`app:data:refresh`	`keys?`	伺服器 & 用戶端	（內部）
`vue: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 }`	用戶端	當偵測到您的應用程式有較新版本時呼叫。
`link:prefetch`	`to`	用戶端	當觀察到 `<NuxtLink>` 被預取時呼叫。
`page:start`	`pageComponent?`	用戶端	在 Suspense 待處理事件時呼叫。
`page:finish`	`pageComponent?`	用戶端	在 Suspense 解析事件時呼叫。
`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` 之後呼叫。

Nuxt 鉤子（建置時）

請查看結構描述原始碼以取得所有可用的鉤子。

鉤子	參數	說明
`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`	在設定期間呼叫，允許模組擴充來源。
`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`	在 Nuxi 寫入 `.nuxt/tsconfig.json` 和 `.nuxt/nuxt.d.ts` 之前呼叫，允許在 `nuxt.d.ts` 中新增自訂參考和宣告，或直接修改 `tsconfig.json` 中的選項
`listen`	`listenerServer, listener`	當開發伺服器正在載入時呼叫。
`schema:extend`	`schemas`	允許擴充預設結構描述。
`schema:resolved`	`schema`	允許擴展已解析的結構描述。
`schema:beforeWrite`	`schema`	在寫入給定的結構描述之前呼叫。
`schema:written`	-	在寫入結構描述之後呼叫。
`vite:extend`	`viteBuildContext`	允許擴展 Vite 預設內容。
`vite:extendConfig`	`viteInlineConfig, env`	允許擴展 Vite 預設設定。
`vite:configResolved`	`viteInlineConfig, env`	允許讀取已解析的 Vite 設定。
`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

範例

Nuxt Kit 工具的實際使用範例。

Import meta

使用 `import.meta` 來了解程式碼的執行環境。