Lifecycle Hooks

Here's the provided information converted into a markdown table format:

App Hooks (runtime)

Hook	Arguments	Environment	Description
app:created	vueApp	Server & Client	Called when initial vueApp instance is created.
app:error	err	Server & Client	Called when a fatal error occurs.
app:error:cleared		Server & Client	Called when a fatal error is cleared.
app:data:refresh	keys?	Server & Client	(internal)
vue:setup	-	Server & Client	(internal)
vue:error	err, target, info	Server & Client	Called when a Vue error propagates to the root component.
app:rendered	renderContext	Server	Called when SSR rendering is done.
app:redirected	-	Server	Called before SSR redirection.
app:beforeMount	vueApp	Client	Called before mounting the app, only on client side.
app:mounted	vueApp	Client	Called when Vue app is initialized and mounted in browser.
app:suspense:resolve	appComponent	Client	On Suspense resolved event.
app:manifest:update		Client	Called when there is a newer version of your app detected.
link:prefetch	to	Client	Called when a <NuxtLink> is observed to be prefetched.
page:start	pageComponent?	Client	Called on Suspense pending event.
page:finish	pageComponent?	Client	Called on Suspense resolved event.
page:loading:start	-	Client	Called when the setup() of the new page is running.
page:loading:end	-	Client	Called after page:finish.
page:transition:finish	pageComponent?	Client	After page transition onAfterLeave event.
dev:ssr-logs	logs	Client	Called with an array of server-side logs that have been passed to the client.
page:view-transition:start	transition	Client	Called after document.startViewTransition is called when experimental viewTransition support is enabled.

Nuxt Hooks (build time)

Hook	Arguments	Description
kit:compatibility	compatibility, issues	Allows extending compatibility checks.
ready	nuxt	Called after Nuxt initialization, when the Nuxt instance is ready to work.
close	nuxt	Called when Nuxt instance is gracefully closing.
restart		To be called to restart the current Nuxt instance.
modules:before	-	Called during Nuxt initialization, before installing user modules.
modules:done	-	Called during Nuxt initialization, after installing user modules.
app:resolve	app	Called after resolving the app instance.
app:templates	app	Called during NuxtApp generation, to allow customizing, modifying or adding new files to the build directory.
app:templatesGenerated	app	Called after templates are compiled into the virtual file system (vfs).
build:before	-	Called before Nuxt bundle builder.
build:done	-	Called after Nuxt bundle builder is complete.
build:manifest	manifest	Called during the manifest build by Vite and webpack.
builder:generateApp	options	Called before generating the app.
builder:watch	event, path	Called at build time in development when the watcher spots a change.
pages:extend	pages	Called after pages routes are resolved.
pages:routerOptions	{ files: Array<{ path: string, optional?: boolean }> }	Called when resolving router.options files.
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, 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.
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 Hooks (runtime, server-side)

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

This table format organizes the provided hooks into a clear and structured layout for easy reference and understanding.

Import meta

import.meta object เป็นวิธีที่ใช้ในโมดูล ES เพื่อเข้าถึงข้อมูลเกี่ยวกับโค้ดที่ import หรือคอมไพล์โดยใช้ ES-module และมีการใช้งานในเอกสารของ Nuxt เพื่อตรวจสอบว่าโค้ดกำลังทำงานอยู่ฝั่งไคลเอ็นต์หรือเซิร์ฟเวอร์บางครั้งด้วยครับ

Runtime (App) Properties

Property	Type	คำอธิบาย
import.meta.client	boolean	เป็น true เมื่อถูกประเมินในฝั่งไคลเอ็นต์
import.meta.browser	boolean	เป็น true เมื่อถูกประเมินในฝั่งไคลเอ็นต์ (เหมือนกับ import.meta.client)
import.meta.server	boolean	เป็น true เมื่อถูกประเมินในฝั่งเซิร์ฟเวอร์
import.meta.nitro	boolean	เป็น true เมื่อถูกประเมินในฝั่งเซิร์ฟเวอร์ (เหมือนกับ import.meta.server)
import.meta.dev	boolean	เป็น true เมื่อทำงานบนเซิร์ฟเวอร์ Nuxt dev
import.meta.test	boolean	เป็น true เมื่อทำงานในบริบทของการทดสอบ
import.meta.prerender	boolean	เป็น true เมื่อทำการเรนเดอร์ HTML บนเซิร์ฟเวอร์ในขั้นตอน prerender ของการสร้าง

Builder Properties

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