生命週期鉤子

Nuxt 提供了一個強大的鉤子系統,可以使用鉤子擴充套件幾乎所有方面。
文件 > 4 X > 指南 > 進階 > 鉤子中閱讀更多內容。

應用鉤子 (執行時)

檢視應用原始碼以獲取所有可用的鉤子。

鉤子引數環境描述
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:prefetch@BobbieGoede客戶端當檢測到<NuxtLink>被預取時呼叫。
page:startpageComponent?客戶端SuspenseNuxtPage待處理事件中呼叫。
page:finishpageComponent?客戶端SuspenseNuxtPage已解析事件中呼叫。
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 鉤子 (構建時)

檢視schema 原始碼以獲取所有可用的鉤子。

鉤子引數描述
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 構建 manifest 期間呼叫。這允許自定義 Nitro 將用於在最終 HTML 中渲染<script><link>標籤的 manifest。
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:contextcontextunimport上下文建立時呼叫。
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@nuxt/cli寫入 TypeScript 配置檔案(.nuxt/tsconfig.app.json.nuxt/tsconfig.server.json等)和.nuxt/nuxt.d.ts之前呼叫,允許在nuxt.d.ts中新增自定義引用和宣告,或直接修改生成的配置中的選項。
listenlistenerServer, listener當開發伺服器載入時呼叫。
schema:extendschemas允許擴充套件預設 schema。
schema:resolvedschema允許擴充套件已解析的 schema。
schema:beforeWriteschema在寫入給定 schema 之前呼叫。
schema:written-在 schema 寫入後呼叫。
vite:extendviteBuildContext允許擴充套件 Vite 預設上下文。
vite:extendConfigviteInlineConfig, env允許擴充套件 Vite 預設配置。已棄用。 我們建議新增一個帶有config鉤子的 Vite 外掛。
vite:configResolvedviteInlineConfig, env允許讀取已解析的 Vite 配置。已棄用。 我們建議新增一個帶有configResolved鉤子的 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 }在傳送響應之前呼叫。response, event
render:htmlhtml, { event }在構建 HTML 之前呼叫。html, event
render:islandislandResponse, { event, islandContext }在構建島嶼 HTML 之前呼叫。islandResponse, event, islandContext
close-當 Nitro 關閉時呼叫。-
errorerror, { event? }發生錯誤時呼叫。error, event
requestevent收到請求時呼叫。event
beforeResponseevent, { body }在傳送響應之前呼叫。event, unknown
afterResponseevent, { body }在傳送響應後呼叫。event, unknown