Context

Source
Nuxt Kit은 컨텍스트와 함께 작업할 수 있도록 도와주는 유틸리티 모음을 제공합니다.

Nuxt 모듈을 사용하면 Nuxt의 기능을 확장할 수 있습니다. 모듈은 코드를 구조적으로 정리하고 모듈화된 상태로 유지할 수 있는 방법을 제공합니다. 모듈을 더 작은 컴포넌트로 나누고 싶다면, Nuxt는 useNuxt 및 tryUseNuxt 함수를 제공합니다. 이 함수들을 사용하면 Nuxt 인스턴스를 인자로 전달하지 않고도 컨텍스트에서 편리하게 접근할 수 있습니다.

Nuxt 모듈에서 setup 함수를 사용할 때는 Nuxt가 이미 두 번째 인자로 제공됩니다. 즉, useNuxt()를 호출하지 않고도 직접 접근할 수 있습니다.

useNuxt

컨텍스트에서 Nuxt 인스턴스를 가져옵니다. Nuxt를 사용할 수 없는 경우 오류를 발생시킵니다.

Usage

import { useNuxt } from '@nuxt/kit'

const setupSomeFeature = () => {
  const nuxt = useNuxt()

  // 이제 nuxt 인스턴스를 사용할 수 있습니다
  console.log(nuxt.options)
}

Type

function useNuxt (): Nuxt

Return Value

useNuxt 함수는 Nuxt 인스턴스를 반환하며, 이 인스턴스에는 Nuxt에서 사용할 수 있는 모든 옵션과 메서드가 포함되어 있습니다.

PropertyTypeDescription
optionsNuxtOptions해석된 Nuxt 설정입니다.
hooksHookable<NuxtHooks>Nuxt 훅 시스템입니다. 라이프사이클 이벤트를 등록하고 수신할 수 있습니다.
hook(name: string, (...args: any[]) => Promise<void> | void) => () => voidnuxt.hooks.hook의 단축키입니다. 특정 라이프사이클 훅에 대한 단일 콜백을 등록합니다.
callHook(name: string, ...args: any[]) => Promise<any>nuxt.hooks.callHook의 단축키입니다. 라이프사이클 훅을 수동으로 트리거하고 등록된 모든 콜백을 실행합니다.
addHooks(configHooks: NestedHooks) => () => voidnuxt.hooks.addHooks의 단축키입니다. 여러 훅을 한 번에 등록합니다.

Examples

import { useNuxt } from '@nuxt/kit'

export const setupTranspilation = () => {
  const nuxt = useNuxt()

  if (nuxt.options.builder === '@nuxt/webpack-builder') {
    nuxt.options.build.transpile ||= []
    nuxt.options.build.transpile.push('xstate')
  }
}

tryUseNuxt

컨텍스트에서 Nuxt 인스턴스를 가져옵니다. Nuxt를 사용할 수 없는 경우 null을 반환합니다.

Usage

import { tryUseNuxt } from '@nuxt/kit'

function setupSomething () {
  const nuxt = tryUseNuxt()

  if (nuxt) {
    // 이제 nuxt 인스턴스를 사용할 수 있습니다
    console.log(nuxt.options)
  } else {
    console.log('Nuxt is not available')
  }
}

Type

function tryUseNuxt (): Nuxt | null

Return Value

tryUseNuxt 함수는 Nuxt를 사용할 수 있는 경우 Nuxt 인스턴스를, 사용할 수 없는 경우 null을 반환합니다.

useNuxt 섹션에서 설명한 Nuxt 인스턴스입니다.

Examples

import { tryUseNuxt } from '@nuxt/kit'

interface SiteConfig {
  title?: string
}

export const requireSiteConfig = (): SiteConfig => {
  const nuxt = tryUseNuxt()
  if (!nuxt) {
    return {}
  }
  return nuxt.options.siteConfig
}