Nuxt에서는 composables, components 및 plugins 내에서 런타임 앱 컨텍스트에 접근할 수 있습니다.

Nuxt App 인터페이스

Nuxt 컨텍스트

많은 내장 및 사용자 정의 composables와 유틸리티는 Nuxt 인스턴스에 대한 접근이 필요할 수 있습니다. 이는 애플리케이션의 모든 곳에 존재하지 않으며, 요청마다 새로운 인스턴스가 생성되기 때문입니다.

현재 Nuxt 컨텍스트는 plugins, Nuxt hooks, Nuxt middleware (defineNuxtRouteMiddleware로 래핑된 경우) 및 setup functions (페이지 및 컴포넌트 내)에서만 접근 가능합니다.

만약 composable이 컨텍스트에 대한 접근 없이 호출되면, 'Nuxt 인스턴스에 대한 접근이 필요한 composable이 plugin, Nuxt hook, Nuxt middleware 또는 Vue setup function 외부에서 호출되었습니다.'라는 오류가 발생할 수 있습니다. 이 경우, nuxtApp.runWithContext를 사용하여 이 컨텍스트 내에서 명시적으로 함수를 호출할 수도 있습니다.

NuxtApp 접근하기

composables, plugins 및 components 내에서 useNuxtApp()를 사용하여 nuxtApp에 접근할 수 있습니다:

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

composable이 항상 nuxtApp을 필요로 하지 않거나 존재 여부를 확인하고 싶을 경우, useNuxtApp이 예외를 발생시키므로 대신 tryUseNuxtApp를 사용할 수 있습니다.

Plugins는 또한 편의를 위해 첫 번째 인수로 nuxtApp을 받습니다.

헬퍼 제공하기

모든 composables 및 애플리케이션에서 사용할 수 있는 헬퍼를 제공할 수 있습니다. 이는 보통 Nuxt plugin 내에서 발생합니다.

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

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