라이프사이클 훅

Nuxt는 훅을 사용해 거의 모든 측면을 확장할 수 있는 강력한 훅킹 시스템을 제공합니다.
Read more in Docs > 4 X > Guide > Going Further > Hooks.

앱 훅 (런타임)

사용 가능한 모든 훅은 앱 소스 코드를 확인하세요.

HookArgumentsEnvironmentDescription
app:createdvueAppServer & Client초기 vueApp 인스턴스가 생성될 때 호출됩니다.
app:errorerrServer & Client치명적인 오류가 발생했을 때 호출됩니다.
app:error:cleared{ redirect? }Server & Client치명적인 오류가 발생했을 때 호출됩니다.
vue:setup-Server & ClientNuxt 루트의 setup이 초기화될 때 호출됩니다. 이 콜백은 동기적이어야 합니다.
vue:errorerr, target, infoServer & ClientVue 오류가 루트 컴포넌트까지 전파되었을 때 호출됩니다. 더 알아보기.
app:renderedrenderContextServerSSR 렌더링이 완료되었을 때 호출됩니다.
app:redirected-ServerSSR 리다이렉션 전에 호출됩니다.
app:beforeMountvueAppClient앱이 마운트되기 전에, 클라이언트 사이드에서만 호출됩니다.
app:mountedvueAppClientVue 앱이 브라우저에서 초기화되고 마운트되었을 때 호출됩니다.
app:suspense:resolveappComponentClientSuspense가 resolve 되었을 때의 이벤트입니다.
app:manifest:update{ id, timestamp }Client앱의 더 최신 버전이 감지되었을 때 호출됩니다.
app:data:refreshkeys?ClientrefreshNuxtData가 호출되었을 때 호출됩니다.
link:prefetchtoClient<NuxtLink>가 프리페치 대상으로 관찰되었을 때 호출됩니다.
page:startpageComponent?ClientNuxtPage 내부의 Suspense pending 이벤트에서 호출됩니다.
page:finishpageComponent?ClientNuxtPage 내부의 Suspense resolved 이벤트에서 호출됩니다.
page:loading:start-Client새 페이지의 setup()이 실행될 때 호출됩니다.
page:loading:end-Clientpage:finish 이후에 호출됩니다.
page:transition:finishpageComponent?Client페이지 전환의 onAfterLeave 이벤트 이후에 호출됩니다.
dev:ssr-logslogsClient서버 사이드 로그 배열이 클라이언트로 전달될 때 호출됩니다 (features.devLogs가 활성화된 경우).
page:view-transition:starttransitionClient실험적인 viewTransition 지원이 활성화되었을 때 document.startViewTransition이 호출된 후에 호출됩니다.

Nuxt 훅 (빌드 타임)

사용 가능한 모든 훅은 스키마 소스 코드를 확인하세요.

HookArgumentsDescription
kit:compatibilitycompatibility, issues호환성 검사를 확장할 수 있습니다.
readynuxtNuxt 인스턴스가 작업할 준비가 되었을 때, Nuxt 초기화 이후에 호출됩니다.
closenuxtNuxt 인스턴스가 정상적으로 종료될 때 호출됩니다.
restart{ hard?: boolean }현재 Nuxt 인스턴스를 재시작하기 위해 호출됩니다.
modules:before-Nuxt 초기화 중, 사용자 모듈을 설치하기 전에 호출됩니다.
modules:done-Nuxt 초기화 중, 사용자 모듈을 설치한 후에 호출됩니다.
app:resolveappapp 인스턴스를 resolve한 후에 호출됩니다.
app:templatesappNuxtApp 생성 중에 호출되며, 빌드 디렉터리(가상 또는 .nuxt에 실제로 기록)에 파일을 커스터마이징, 수정 또는 새로 추가할 수 있습니다.
app:templatesGeneratedapp템플릿이 가상 파일 시스템 (vfs)으로 컴파일된 후에 호출됩니다.
build:before-Nuxt 번들 빌더 이전에 호출됩니다.
build:done-Nuxt 번들 빌더가 완료된 후에 호출됩니다.
build:manifestmanifestVite와 webpack에 의해 매니페스트를 빌드하는 동안 호출됩니다. Nitro가 최종 HTML에서 <script><link> 태그를 렌더링할 때 사용할 매니페스트를 커스터마이징할 수 있습니다.
builder:generateAppoptions앱을 생성하기 전에 호출됩니다.
builder:watchevent, path개발 환경에서 빌드 타임에, 워처가 프로젝트 내 파일 또는 디렉터리의 변경을 감지했을 때 호출됩니다.
pages:extendpages파일 시스템에서 페이지 라우트를 스캔한 후에 호출됩니다.
pages:resolvedpages페이지 라우트가 스캔된 메타데이터로 보강된 후에 호출됩니다.
pages:routerOptions{ files: Array<{ path: string, optional?: boolean }> }router.options 파일을 resolve할 때 호출됩니다. 배열의 뒤쪽 항목이 앞쪽 항목을 덮어씁니다.
server:devHandlerhandlerNitro 개발 서버에 개발 미들웨어가 등록될 때 호출됩니다.
imports:sourcespresets설정 시점에 호출되며, 모듈이 소스를 확장할 수 있도록 합니다.
imports:extendimports설정 시점에 호출되며, 모듈이 import를 확장할 수 있도록 합니다.
imports:contextcontextunimport 컨텍스트가 생성될 때 호출됩니다.
imports:dirsdirsimport 디렉터리를 확장할 수 있습니다.
components:dirsdirsapp:resolve 내에서 호출되며, 자동 import 가능한 컴포넌트를 스캔할 디렉터리를 확장할 수 있습니다.
components:extendcomponents새 컴포넌트를 확장할 수 있습니다.
nitro:confignitroConfigNitro 초기화 전에 호출되며, Nitro 설정을 커스터마이징할 수 있습니다.
nitro:initnitroNitro가 초기화된 후에 호출되며, Nitro 훅을 등록하고 Nitro와 직접 상호작용할 수 있습니다.
nitro:build:beforenitroNitro 인스턴스를 빌드하기 전에 호출됩니다.
nitro:build:public-assetsnitropublic 에셋을 복사한 후에 호출됩니다. Nitro 서버가 빌드되기 전에 public 에셋을 수정할 수 있습니다.
prerender:routesctx프리렌더링할 라우트를 확장할 수 있습니다.
build:errorerror빌드 타임에 오류가 발생했을 때 호출됩니다.
prepare:typesoptions@nuxt/cli가 TypeScript 설정 파일(.nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json 등)과 .nuxt/nuxt.d.ts를 작성하기 전에 호출되며, nuxt.d.ts에 커스텀 reference 및 선언을 추가하거나, 생성된 설정의 옵션을 직접 수정할 수 있습니다.
listenlistenerServer, listener개발 서버가 로딩될 때 호출됩니다.
schema:extendschemas기본 스키마를 확장할 수 있습니다.
schema:resolvedschemaresolve된 스키마를 확장할 수 있습니다.
schema:beforeWriteschema주어진 스키마를 기록하기 전에 호출됩니다.
schema:written-스키마가 기록된 후에 호출됩니다.
vite:extendviteBuildContextVite 기본 컨텍스트를 확장할 수 있습니다.
vite:extendConfigviteInlineConfig, envVite 기본 설정을 확장할 수 있습니다. Nuxt 5+에서 deprecated되었습니다. Nuxt 5에서는 클라이언트/서버 개별 설정이 아닌 공유 설정에 대해 동작합니다.
vite:configResolvedviteInlineConfig, envresolve된 Vite 설정을 읽을 수 있습니다. Nuxt 5+에서 deprecated되었습니다. Nuxt 5에서는 클라이언트/서버 개별 설정이 아닌 공유 설정에 대해 동작합니다.
vite:serverCreatedviteServer, envVite 서버가 생성되었을 때 호출됩니다.
vite:compiled-Vite 서버가 컴파일된 후에 호출됩니다.
webpack:configwebpackConfigswebpack 컴파일러를 설정하기 전에 호출됩니다.
webpack:configResolvedwebpackConfigsresolve된 webpack 설정을 읽을 수 있습니다.
webpack:compileoptions컴파일 직전에 호출됩니다.
webpack:compiledoptions리소스가 로드된 후에 호출됩니다.
webpack:changeshortPathWebpackBar에서 change 이벤트 시 호출됩니다.
webpack:error-WebpackBar에서 오류가 있는 done 시 호출됩니다.
webpack:done-WebpackBar에서 allDone 시 호출됩니다.
webpack:progressstatesArrayWebpackBar에서 progress 시 호출됩니다.

Nitro 앱 훅 (런타임, 서버 사이드)

사용 가능한 모든 훅은 Nitro를 참고하세요.

HookArgumentsDescriptionTypes
dev:ssr-logs{ path, logs }Server요청 사이클의 끝에서 서버 사이드 로그 배열과 함께 호출됩니다.
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