Context

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

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

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

`useNuxt`

컨텍스트에서 Nuxt 인스턴스를 가져옵니다. Nuxt가 사용 불가능한 경우 에러를 발생시킵니다.

사용법

import { useNuxt } from '@nuxt/kit'

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

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

타입

function useNuxt(): Nuxt

반환값

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

속성	타입	설명
`options`	`NuxtOptions`	해석된 Nuxt 설정입니다.
`hooks`	`Hookable<NuxtHooks>`	Nuxt 훅 시스템입니다. 라이프사이클 이벤트 등록 및 청취가 가능합니다.
`hook`	`(name: string, (...args: any[]) => Promise<void> \| void) => () => void`	`nuxt.hooks.hook`의 단축키입니다. 특정 라이프사이클 훅에 콜백을 하나 등록합니다.
`callHook`	`(name: string, ...args: any[]) => Promise<any>`	`nuxt.hooks.callHook`의 단축키입니다. 라이프사이클 훅을 수동으로 트리거하고 등록된 모든 콜백을 실행합니다.
`addHooks`	`(configHooks: NestedHooks) => () => void`	`nuxt.hooks.addHooks`의 단축키입니다. 여러 훅을 한 번에 등록합니다.

예시

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')
  }
}

import { setupTranspilation } from './setupTranspilation'

export default defineNuxtModule({
  setup () {
    setupTranspilation()
  },
})

`tryUseNuxt`

컨텍스트에서 Nuxt 인스턴스를 가져옵니다. Nuxt가 사용 불가능한 경우 null을 반환합니다.

사용법

import { tryUseNuxt } from '@nuxt/kit'

function setupSomething () {
  const nuxt = tryUseNuxt()

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

타입

function tryUseNuxt(): Nuxt | null

반환값

tryUseNuxt 함수는 Nuxt 인스턴스가 있으면 반환하고, Nuxt를 사용할 수 없으면 null을 반환합니다.

Nuxt 인스턴스는 useNuxt 섹션에서 설명한 것과 동일합니다.

예시

import { tryUseNuxt } from '@nuxt/kit'

interface SiteConfig {
  title?: string
}

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

import { defineNuxtModule, useNuxt } from '@nuxt/kit'
import { requireSiteConfig } from './requireSiteConfig'

export default defineNuxtModule({
  setup (_, nuxt) {
    const config = requireSiteConfig()
    nuxt.options.app.head.title = config.title
  },
})