이 가이드는 Nuxt 내부를 더 잘 이해하여 Nuxt 위에 새로운 솔루션과 모듈 통합을 개발하는 데 도움을 줍니다.

Nuxt 인터페이스

nuxt dev로 개발 모드에서 Nuxt를 시작하거나 nuxt build로 프로덕션 애플리케이션을 빌드할 때, nuxt라고 내부적으로 참조되는 공통 컨텍스트가 생성됩니다. 이 컨텍스트는 nuxt.config 파일과 병합된 정규화된 옵션, 일부 내부 상태, 그리고 unjs/hookable에 의해 구동되는 강력한 후킹 시스템을 포함하여 다양한 컴포넌트가 서로 통신할 수 있게 합니다. 이를 Builder Core라고 생각할 수 있습니다.

이 컨텍스트는 Nuxt Kit 컴포저블과 함께 사용하기 위해 전역적으로 사용할 수 있습니다. 따라서 프로세스당 하나의 Nuxt 인스턴스만 실행할 수 있습니다.

Nuxt 인터페이스를 확장하고 빌드 프로세스의 다양한 단계에 후킹하기 위해 Nuxt 모듈을 사용할 수 있습니다.

자세한 내용은 소스 코드를 확인하세요.

NuxtApp 인터페이스

브라우저나 서버에서 페이지를 렌더링할 때, nuxtApp이라고 불리는 공유 컨텍스트가 생성됩니다. 이 컨텍스트는 vue 인스턴스, 런타임 후크, ssrContext 및 하이드레이션을 위한 payload와 같은 내부 상태를 유지합니다. 이를 Runtime Core라고 생각할 수 있습니다.

이 컨텍스트는 Nuxt 플러그인과 <script setup> 및 vue 컴포저블 내에서 useNuxtApp() 컴포저블을 사용하여 접근할 수 있습니다. 브라우저에서는 전역 사용이 가능하지만, 사용자 간의 컨텍스트 공유를 피하기 위해 서버에서는 불가능합니다.

useNuxtApp이 현재 컨텍스트가 사용 불가능할 경우 예외를 던지기 때문에, 컴포저블이 항상 nuxtApp을 필요로 하지 않는 경우, 예외를 던지지 않고 null을 반환하는 tryUseNuxtApp을 대신 사용할 수 있습니다.

nuxtApp 인터페이스를 확장하고 다양한 단계에 후킹하거나 컨텍스트에 접근하기 위해 Nuxt 플러그인을 사용할 수 있습니다.

이 인터페이스에 대한 자세한 정보는 Nuxt App을 확인하세요.

nuxtApp은 다음과 같은 속성을 가지고 있습니다:

const nuxtApp = {
  vueApp, // 글로벌 Vue 애플리케이션: https://vuejs.org/api/application.html#application-api

  versions, // Nuxt 및 Vue 버전을 포함하는 객체

  // 런타임 NuxtApp 후크를 호출하고 추가할 수 있습니다
  // https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/nuxt.ts#L18
  hooks,
  hook,
  callHook,

  // 서버 측에서만 접근 가능
  ssrContext: {
    url,
    req,
    res,
    runtimeConfig,
    noSSR,
  },

  // 서버에서 클라이언트로 전달되며 문자열화됩니다
  payload: {
    serverRendered: true,
    data: {},
    state: {}
  }

  provide: (name: string, value: any) => void
}

자세한 내용은 소스 코드를 확인하세요.

런타임 컨텍스트 vs. 빌드 컨텍스트

Nuxt는 Node.js를 사용하여 프로젝트를 빌드하고 번들링하지만 런타임 측면도 가지고 있습니다.

두 영역 모두 확장할 수 있지만, 런타임 컨텍스트는 빌드 타임과 분리되어 있습니다. 따라서 런타임 구성 외에는 상태, 코드 또는 컨텍스트를 공유해서는 안 됩니다!

nuxt.config와 Nuxt 모듈은 빌드 컨텍스트를 확장하는 데 사용할 수 있으며, Nuxt 플러그인은 런타임을 확장하는 데 사용할 수 있습니다.

프로덕션을 위한 애플리케이션을 빌드할 때, nuxt build는 .output 디렉토리에 독립적인 빌드를 생성하며, 이는 nuxt.config 및 Nuxt 모듈과 독립적입니다.