NuxtApp

Nuxt에서는 컴포저블, 컴포넌트 및 플러그인 내에서 런타임 앱 컨텍스트에 접근할 수 있습니다.

Nuxt App 인터페이스

Nuxt 컨텍스트

내장 및 사용자 정의를 포함한 많은 컴포저블과 유틸리티는 Nuxt 인스턴스에 대한 접근이 필요할 수 있습니다. 애플리케이션 전체 어디에서나 존재하는 것은 아니며, 요청마다 새로운 인스턴스가 생성되기 때문입니다.

현재 Nuxt 컨텍스트는 플러그인, Nuxt 훅, Nuxt 미들웨어 (defineNuxtRouteMiddleware로 래핑된 경우), 그리고 (페이지와 컴포넌트의) setup 함수에서만 접근할 수 있습니다.

컨텍스트에 대한 접근 없이 컴포저블이 호출되면, 'Nuxt 인스턴스에 대한 접근이 필요한 컴포저블이 플러그인, Nuxt 훅, Nuxt 미들웨어 또는 Vue setup 함수 외부에서 호출되었습니다.'라는 오류가 발생할 수 있습니다. 그런 경우 nuxtApp.runWithContext를 사용하여 이 컨텍스트 내에서 함수를 명시적으로 호출할 수도 있습니다.

NuxtApp에 접근하기

컴포저블, 플러그인 및 컴포넌트 내에서는 useNuxtApp()을 사용하여 nuxtApp에 접근할 수 있습니다:

export function useMyComposable () {
  const nuxtApp = useNuxtApp()
  // 런타임 nuxt 앱 인스턴스에 접근
}

컴포저블이 항상 nuxtApp을 필요로 하지 않거나, 단순히 존재 여부를 확인하고 싶은 경우 useNuxtApp이 예외를 던지기 때문에, 대신 tryUseNuxtApp을 사용할 수 있습니다.

플러그인은 편의를 위해 첫 번째 인자로 nuxtApp을 받기도 합니다.

헬퍼 제공하기

모든 컴포저블과 애플리케이션 전반에서 사용할 수 있는 헬퍼를 제공할 수 있습니다. 이는 보통 Nuxt 플러그인 내에서 이루어집니다.

const nuxtApp = useNuxtApp()
nuxtApp.provide('hello', name => `Hello ${name}!`)

console.log(nuxtApp.$hello('name')) // "Hello name!"을 출력