Nuxt 모듈은 Nuxt의 기능을 확장할 수 있게 해줍니다. 이들은 코드를 체계적으로 조직하고 모듈화할 수 있는 구조화된 방법을 제공합니다. 모듈을 더 작은 구성 요소로 분해하려는 경우, Nuxt는 useNuxt 및 tryUseNuxt 함수를 제공합니다. 이 함수들은 Nuxt 인스턴스를 인자로 전달하지 않고도 컨텍스트에서 편리하게 접근할 수 있게 해줍니다.

useNuxt

컨텍스트에서 Nuxt 인스턴스를 가져옵니다. Nuxt가 사용 가능하지 않으면 오류를 발생시킵니다.

사용법

import { useNuxt } from '@nuxt/kit'

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

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

타입

// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function useNuxt(): Nuxt

반환 값

useNuxt 함수는 Nuxt 인스턴스를 반환하며, 이는 Nuxt에서 사용 가능한 모든 옵션과 메서드를 포함합니다.

예제

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을 반환합니다.

사용법

import { tryUseNuxt } from '@nuxt/kit'

function setupSomething () {
  const nuxt = tryUseNuxt()

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

타입

// @errors: 2391
import type { Nuxt } from '@nuxt/schema'
// ---cut---
function tryUseNuxt(): Nuxt | null

반환 값

tryUseNuxt 함수는 사용 가능할 경우 Nuxt 인스턴스를 반환하고, Nuxt가 사용 가능하지 않으면 null을 반환합니다.

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

예제

declare module '@nuxt/schema' {
  interface NuxtOptions {
    siteConfig: SiteConfig
  }
}
// ---cut---
import { tryUseNuxt } from '@nuxt/kit'

interface SiteConfig {
  title?: string
}

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