Lifecycle Hooks

Lifecycle Hooks คือจุดที่เราสามารถเข้าไปแทรกแซงการทำงานของ Nuxt ในช่วงเวลาต่างๆ ของการทำงานของแอพพลิเคชั่น

App Hooks (runtime)

App Hooks คือ hooks ที่ทำงานในระหว่างที่แอพกำลังทำงาน (runtime) ทั้งฝั่ง server และ client

Hook	Arguments	Environment	คำอธิบาย
app:created	vueApp	Server & Client	เรียกเมื่อมีการสร้าง vueApp instance แรกเริ่ม
app:error	err	Server & Client	เรียกเมื่อเกิด fatal error
app:error:cleared		Server & Client	เรียกเมื่อเกิด fatal error
app:data:refresh	keys?	Server & Client	(internal)
vue:setup	-	Server & Client	(internal)
vue:error	err, target, info	Server & Client	เรียกเมื่อ vue error กระจายไปถึง root component
app:rendered	renderContext	Server	เรียกเมื่อการ render SSR เสร็จสิ้น
app:redirected	-	Server	เรียกก่อนการ redirect SSR
app:beforeMount	vueApp	Client	เรียกก่อนการ mount app เฉพาะฝั่ง client
app:mounted	vueApp	Client	เรียกเมื่อ Vue app ถูกเริ่มต้นและ mount ในเบราว์เซอร์
app:suspense:resolve	appComponent	Client	เมื่อ Suspense resolved event
app:manifest:update		Client	เรียกเมื่อตรวจพบเวอร์ชันใหม่ของแอพ
link:prefetch	to	Client	เรียกเมื่อ <NuxtLink> ถูกสังเกตว่าจะมีการ prefetch
page:start	pageComponent?	Client	เรียกเมื่อ Suspense pending event
page:finish	pageComponent?	Client	เรียกเมื่อ Suspense resolved event
page:loading:start	-	Client	เรียกเมื่อ setup() ของหน้าใหม่กำลังทำงาน
page:loading:end	-	Client	เรียกหลังจาก page:finish
page:transition:finish	pageComponent?	Client	หลังจาก page transition onAfterLeave event
dev:ssr-logs	logs	Client	เรียกพร้อมอาร์เรย์ของ server-side logs ที่ถูกส่งไปยัง client
page:view-transition:start	transition	Client	เรียกหลังจาก document.startViewTransition ถูกเรียก

Nuxt Hooks (build time)

Nuxt Hooks คือ hooks ที่ทำงานในระหว่างการ build แอพพลิเคชั่น ใช้สำหรับปรับแต่งกระบวนการ build

Hook	Arguments	คำอธิบาย
kit:compatibility	compatibility, issues	อนุญาตให้ขยายการตรวจสอบความเข้ากันได้
ready	nuxt	เรียกหลังจากการเริ่มต้น Nuxt เมื่อ Nuxt instance พร้อมทำงาน
close	nuxt	เรียกเมื่อ Nuxt instance กำลังปิดตัวลงอย่างสมบูรณ์
restart		ต้องเรียกเพื่อรีสตาร์ท Nuxt instance ปัจจุบัน
modules:before	-	เรียกระหว่างการเริ่มต้น Nuxt ก่อนติดตั้ง user modules
modules:done	-	เรียกระหว่างการเริ่มต้น Nuxt หลังติดตั้ง user modules
app:resolve	app	เรียกหลังจากการ resolve app instance
app:templates	app	เรียกระหว่างการสร้าง NuxtApp
app:templatesGenerated	app	เรียกหลังจาก templates ถูก compile เข้าสู่ virtual file system
build:before	-	เรียกก่อน Nuxt bundle builder
build:done	-	เรียกหลังจาก Nuxt bundle builder เสร็จสมบูรณ์
build:manifest	manifest	เรียกระหว่างการสร้าง manifest โดย Vite และ webpack
builder:generateApp	options	เรียกก่อนการสร้างแอพ
builder:watch	event, path	เรียกในช่วง build time ในโหมด development เมื่อ watcher พบการเปลี่ยนแปลง
pages:extend	pages	เรียกหลังจาก page routes ถูกสแกนจาก file system
pages:resolved	pages	เรียกหลังจาก page routes ถูกเพิ่มเติมด้วย metadata ที่สแกนได้
pages:routerOptions	{ files: Array<{ path: string, optional?: boolean }> }	เรียกเมื่อ resolve router.options files
server:devHandler	handler	เรียกเมื่อ dev middleware กำลังถูกลงทะเบียน
imports:sources	presets	เรียกตอนตั้งค่าเพื่อให้ modules ขยาย sources
imports:extend	imports	เรียกตอนตั้งค่าเพื่อให้ modules ขยาย imports
imports:context	context	เรียกเมื่อ unimport context ถูกสร้าง
imports:dirs	dirs	อนุญาตให้ขยาย import directories
components:dirs	dirs	เรียกภายใน app:resolve เพื่อขยาย directories
components:extend	components	อนุญาตให้ขยาย components ใหม่
nitro:config	nitroConfig	เรียกก่อนเริ่มต้น Nitro
nitro:init	nitro	เรียกหลังจาก Nitro ถูกเริ่มต้น
nitro:build:before	nitro	เรียกก่อนการสร้าง Nitro instance
nitro:build:public-assets	nitro	เรียกหลังจากคัดลอก public assets
prerender:routes	ctx	อนุญาตให้ขยาย routes ที่จะถูก pre-rendered
build:error	error	เรียกเมื่อเกิดข้อผิดพลาดในช่วง build time
prepare:types	options	เรียกก่อน Nuxi เขียนไฟล์การตั้งค่า
listen	listenerServer, listener	เรียกเมื่อ dev server กำลังโหลด
schema:extend	schemas	อนุญาตให้ขยาย default schemas
schema:resolved	schema	อนุญาตให้ขยาย resolved schema
schema:beforeWrite	schema	เรียกก่อนเขียน schema ที่กำหนด
schema:written	-	เรียกหลังจาก schema ถูกเขียน
vite:extend	viteBuildContext	อนุญาตให้ขยาย Vite default context
vite:extendConfig	viteInlineConfig, env	อนุญาตให้ขยาย Vite default config
vite:configResolved	viteInlineConfig, env	อนุญาตให้อ่าน resolved Vite config
vite:serverCreated	viteServer, env	เรียกเมื่อ Vite server ถูกสร้าง
vite:compiled	-	เรียกหลังจาก Vite server ถูก compile
webpack:config	webpackConfigs	เรียกก่อนการตั้งค่า webpack compiler
webpack:configResolved	webpackConfigs	อนุญาตให้อ่าน resolved webpack config
webpack:compile	options	เรียกก่อนการ compilation
webpack:compiled	options	เรียกหลังจากโหลด resources
webpack:change	shortPath	เรียกเมื่อมีการเปลี่ยนแปลงบน WebpackBar
webpack:error	-	เรียกเมื่อเสร็จสิ้นถ้ามีข้อผิดพลาดบน WebpackBar
webpack:done	-	เรียกเมื่อ allDone บน WebpackBar
webpack:progress	statesArray	เรียกเมื่อมีความคืบหน้าบน WebpackBar

Nitro App Hooks (runtime, server-side)

Nitro App Hooks คือ hooks ที่ทำงานในระหว่าง runtime บนฝั่ง server โดยเฉพาะ ใช้จัดการกับการทำงานของ Nitro server

Hook	Arguments	คำอธิบาย
dev:ssr-logs		เรียกเมื่อสิ้นสุด request cycle พร้อม logs array
render:response	response,	เรียกก่อนส่ง response
render:html	html,	เรียกก่อนสร้าง HTML
render:island	islandResponse,	เรียกก่อนสร้าง island HTML
close	-	เรียกเมื่อ Nitro ถูกปิด
error	error,	เรียกเมื่อเกิดข้อผิดพลาด
request	event	เรียกเมื่อได้รับ request
beforeResponse	event,	เรียกก่อนส่ง response
afterResponse	event,	เรียกหลังส่ง response

Import meta

Import meta เป็นวิธีการเข้าถึง metadata และค่าต่างๆ ของ module ในระหว่างการทำงานของแอพพลิเคชั่น

Runtime (App) Properties

Properties ที่สามารถใช้ได้ในระหว่าง runtime เพื่อตรวจสอบสภาพแวดล้อมการทำงานของแอพ

Property	Type	คำอธิบาย
import.meta.client	boolean	เป็นจริงเมื่อทำงานบนฝั่ง client
import.meta.browser	boolean	เป็นจริงเมื่อทำงานบนฝั่ง client
import.meta.server	boolean	เป็นจริงเมื่อทำงานบนฝั่ง server
import.meta.nitro	boolean	เป็นจริงเมื่อทำงานบนฝั่ง server
import.meta.dev	boolean	เป็นจริงเมื่อรัน Nuxt dev server
import.meta.test	boolean	เป็นจริงเมื่อรันใน test context
import.meta.prerender	boolean	เป็นจริงเมื่อ render HTML บน server ในขั้นตอน prerender ของการ build

Builder Properties

Properties ที่มีให้ใช้ในระหว่างการ build แอพพลิเคชั่น

Property	Type	คำอธิบาย
import.meta.env	object	เท่ากับ process.env
import.meta.url	string	เส้นทางที่สามารถ resolve ได้สำหรับไฟล์ปัจจุบัน