라이프사이클 훅

Nuxt는 거의 모든 측면을 확장할 수 있는 강력한 훅킹 시스템을 제공합니다.

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

앱 훅 (런타임)

사용 가능한 모든 훅은 앱 소스 코드에서 확인할 수 있습니다.

Hook	Arguments	환경	설명
`app:created`	`vueApp`	서버 & 클라이언트	초기 `vueApp` 인스턴스가 생성될 때 호출됩니다.
`app:error`	`err`	서버 & 클라이언트	치명적인 오류가 발생할 때 호출됩니다.
`app:error:cleared`	`{ redirect? }`	서버 & 클라이언트	치명적인 오류가 발생할 때 호출됩니다.
`vue:setup`	-	서버 & 클라이언트	Nuxt 루트의 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가 resolve될 때 이벤트가 발생합니다.
`app:manifest:update`	`{ id, timestamp }`	클라이언트	앱의 새로운 버전이 감지되었을 때 호출됩니다.
`app:data:refresh`	`keys?`	클라이언트	`refreshNuxtData`가 호출될 때 호출됩니다.
`link:prefetch`	`to`	클라이언트	`<NuxtLink>`가 prefetch될 때 관찰되어 호출됩니다.
`page:start`	`pageComponent?`	클라이언트	`NuxtPage` 내 Suspense pending 이벤트에서 호출됩니다.
`page:finish`	`pageComponent?`	클라이언트	`NuxtPage` 내 Suspense resolved 이벤트에서 호출됩니다.
`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 훅 (빌드 타임)

사용 가능한 모든 훅은 스키마 소스 코드에서 확인할 수 있습니다.

Hook	Arguments	설명
`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` 인스턴스가 resolve된 후 호출됩니다.
`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`	앱을 생성하기 전에 호출됩니다.
`builder:watch`	`event, path`	개발 중 빌드 타임에 워처가 프로젝트 내 파일 또는 디렉토리의 변경을 감지할 때 호출됩니다.
`pages:extend`	`pages`	파일 시스템에서 페이지 라우트를 스캔한 후 호출됩니다.
`pages:resolved`	`pages`	페이지 라우트가 스캔된 메타데이터로 보강된 후 호출됩니다.
`pages:routerOptions`	`{ files: Array<{ path: string, optional?: boolean }> }`	`router.options` 파일을 resolve할 때 호출됩니다. 배열의 나중 항목이 이전 항목을 덮어씁니다.
`server:devHandler`	`handler`	Nitro 개발 서버에 dev 미들웨어가 등록될 때 호출됩니다.
`imports:sources`	`presets`	모듈이 소스를 확장할 수 있도록 setup 시 호출됩니다.
`imports:extend`	`imports`	모듈이 import를 확장할 수 있도록 setup 시 호출됩니다.
`imports:context`	`context`	unimport 컨텍스트가 생성될 때 호출됩니다.
`imports:dirs`	`dirs`	import 디렉토리를 확장할 수 있습니다.
`components:dirs`	`dirs`	`app:resolve` 내에서 호출되어 자동 import 가능한 컴포넌트를 스캔할 디렉토리를 확장할 수 있습니다.
`components:extend`	`components`	새로운 컴포넌트를 확장할 수 있습니다.
`nitro:config`	`nitroConfig`	Nitro 초기화 전에 호출되어 Nitro의 설정을 커스터마이징할 수 있습니다.
`nitro:init`	`nitro`	Nitro가 초기화된 후 호출되어 Nitro 훅을 등록하거나 Nitro와 직접 상호작용할 수 있습니다.
`nitro:build:before`	`nitro`	Nitro 인스턴스를 빌드하기 전에 호출됩니다.
`nitro:build:public-assets`	`nitro`	public asset 복사 후 호출됩니다. Nitro 서버 빌드 전에 public asset을 수정할 수 있습니다.
`prerender:routes`	`ctx`	프리렌더링할 라우트를 확장할 수 있습니다.
`build:error`	`error`	빌드 타임에 오류가 발생할 때 호출됩니다.
`prepare:types`	`options`	`@nuxt/cli`가 `.nuxt/tsconfig.json` 및 `.nuxt/nuxt.d.ts`를 작성하기 전에 호출되어, `nuxt.d.ts`에 커스텀 참조 및 선언을 추가하거나 `tsconfig.json`의 옵션을 직접 수정할 수 있습니다.
`listen`	`listenerServer, listener`	개발 서버가 로딩될 때 호출됩니다.
`schema:extend`	`schemas`	기본 스키마를 확장할 수 있습니다.
`schema:resolved`	`schema`	resolve된 스키마를 확장할 수 있습니다.
`schema:beforeWrite`	`schema`	주어진 스키마를 작성하기 전에 호출됩니다.
`schema:written`	-	스키마가 작성된 후 호출됩니다.
`vite:extend`	`viteBuildContext`	Vite 기본 컨텍스트를 확장할 수 있습니다.
`vite:extendConfig`	`viteInlineConfig, env`	Vite 기본 설정을 확장할 수 있습니다.
`vite:configResolved`	`viteInlineConfig, env`	resolve된 Vite 설정을 읽을 수 있습니다.
`vite:serverCreated`	`viteServer, env`	Vite 서버가 생성될 때 호출됩니다.
`vite:compiled`	-	Vite 서버가 컴파일된 후 호출됩니다.
`webpack:config`	`webpackConfigs`	webpack 컴파일러 설정 전에 호출됩니다.
`webpack:configResolved`	`webpackConfigs`	resolve된 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에서 확인할 수 있습니다.

Hook	Arguments	설명	타입
`dev:ssr-logs`	`{ path, logs }`	서버	요청 사이클 종료 시 서버 사이드 로그 배열과 함께 호출됩니다.
`render:response`	`response, { event }`	응답을 보내기 전에 호출됩니다.	response, event
`render:html`	`html, { event }`	HTML을 구성하기 전에 호출됩니다.	html, event
`render:island`	`islandResponse, { event, islandContext }`	island HTML을 구성하기 전에 호출됩니다.	islandResponse, event, islandContext
`close`	-	Nitro가 종료될 때 호출됩니다.	-
`error`	`error, { event? }`	오류가 발생할 때 호출됩니다.	error, event
`request`	`event`	요청이 수신될 때 호출됩니다.	event
`beforeResponse`	`event, { body }`	응답을 보내기 전에 호출됩니다.	event, unknown
`afterResponse`	`event, { body }`	응답을 보낸 후 호출됩니다.	event, unknown