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!"을 출력합니다.