모듈

Nuxt Kit은 모듈을 생성하고 사용할 수 있도록 도와주는 유틸리티 집합을 제공합니다. 이 유틸리티를 사용하여 직접 모듈을 만들거나 기존 모듈을 재사용할 수 있습니다.

모듈은 Nuxt의 구성 요소입니다. Kit은 모듈을 생성하고 사용할 수 있도록 도와주는 유틸리티 집합을 제공합니다. 이 유틸리티를 사용하여 직접 모듈을 만들거나 기존 모듈을 재사용할 수 있습니다. 예를 들어, defineNuxtModule 함수를 사용하여 모듈을 정의하고, installModule 함수를 사용하여 프로그래밍 방식으로 모듈을 설치할 수 있습니다.

`defineNuxtModule`

Nuxt 모듈을 정의하며, 기본값과 사용자가 제공한 옵션을 자동으로 병합하고, 제공된 후크를 설치하며, 전체 제어를 위한 선택적 setup 함수를 호출합니다.

사용법

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  defaults: {
    enabled: true
  },
  setup (options) {
    if (options.enabled) {
      console.log('내 Nuxt 모듈이 활성화되었습니다!')
    }
  }
})

타입

export function defineNuxtModule<TOptions extends ModuleOptions> (
  definition?: ModuleDefinition<TOptions, Partial<TOptions>, false> | NuxtModule<TOptions, Partial<TOptions>, false>,
): NuxtModule<TOptions, TOptions, false>

매개변수

definition: 모듈 정의 객체 또는 모듈 함수입니다. 모듈 정의 객체는 다음 속성을 포함해야 합니다:

속성	타입	필수	설명
`meta`	`ModuleMeta`	`false`	모듈의 메타데이터입니다. 모듈 이름, 버전, config key, 호환성을 정의합니다.
`defaults`	`T \| ((nuxt: Nuxt) => T)`	`false`	모듈의 기본 옵션입니다. 함수가 제공되면 Nuxt 인스턴스를 첫 번째 인자로 호출합니다.
`schema`	`T`	`false`	모듈 옵션의 스키마입니다. 제공되면 옵션이 스키마에 적용됩니다.
`hooks`	`Partial<NuxtHooks>`	`false`	모듈에 설치할 후크입니다. 제공되면 모듈이 후크를 설치합니다.
`setup`	`(this: void, resolvedOptions: T, nuxt: Nuxt) => Awaitable<void \| false \| ModuleSetupInstallResult>`	`false`	모듈의 setup 함수입니다. 제공되면 모듈이 setup 함수를 호출합니다.

예시

`configKey`를 사용하여 모듈을 설정 가능하게 만들기

Nuxt 모듈을 정의할 때, configKey를 설정하여 사용자가 nuxt.config에서 모듈을 어떻게 설정할지 지정할 수 있습니다.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  defaults: {
    // 모듈 옵션
    enabled: true
  },
  setup (options) {
    if (options.enabled) {
      console.log('내 Nuxt 모듈이 활성화되었습니다!')
    }
  }
})

사용자는 nuxt.config의 해당 키 아래에 이 모듈의 옵션을 제공할 수 있습니다.

export default defineNuxtConfig({
  myModule: {
    enabled: false
  }
})

모듈 호환성 요구사항 정의하기

Nuxt 모듈을 개발하면서 특정 Nuxt 버전에서만 지원되는 API를 사용하는 경우, compatibility.nuxt를 포함하는 것이 매우 권장됩니다.

export default defineNuxtModule({
  meta: {
    name: '@nuxt/icon',
    configKey: 'icon',
    compatibility: {
      // semver 형식의 필수 nuxt 버전
      nuxt: '>=3.0.0', // 또는 '^3.0.0' 사용
    },
  },
  async setup() {
    const resolver = createResolver(import.meta.url)
    // 구현
  },
})

사용자가 호환되지 않는 Nuxt 버전에서 모듈을 사용하려고 하면 콘솔에 경고가 표시됩니다.

 WARN  모듈 @nuxt/icon이(가) 호환성 문제로 인해 비활성화되었습니다:
 - [nuxt] Nuxt 버전 ^3.1.0이(가) 필요하지만 현재 3.0.0을(를) 사용 중입니다

`installModule`

지정된 Nuxt 모듈을 프로그래밍 방식으로 설치합니다. 이 기능은 모듈이 다른 모듈에 의존할 때 유용합니다. inlineOptions에 모듈 옵션을 객체로 전달하면 해당 옵션이 모듈의 setup 함수로 전달됩니다.

사용법

import { defineNuxtModule, installModule } from '@nuxt/kit'

export default defineNuxtModule({  
  async setup () {
    // Roboto 폰트와 Impact 폴백으로 @nuxtjs/fontaine을 설치합니다
    await installModule('@nuxtjs/fontaine', {
      // 모듈 설정
      fonts: [
        {
          family: 'Roboto',
          fallbacks: ['Impact'],
          fallbackName: 'fallback-a',
        }
      ]
    })
  }
})

타입

async function installModule (moduleToInstall: string | NuxtModule, inlineOptions?: any, nuxt?: Nuxt)

매개변수

속성	타입	필수	설명
`moduleToInstall`	`string \| NuxtModule`	`true`	설치할 모듈입니다. 모듈 이름의 문자열이거나 모듈 객체 자체일 수 있습니다.
`inlineOptions`	`any`	`false`	모듈의 `setup` 함수로 전달할 모듈 옵션 객체입니다.
`nuxt`	`Nuxt`	`false`	Nuxt 인스턴스입니다. 제공되지 않으면 `useNuxt()` 호출을 통해 컨텍스트에서 가져옵니다.

예시

import { defineNuxtModule, installModule } from '@nuxt/kit'

export default defineNuxtModule({  
  async setup (options, nuxt) {
    // Roboto 폰트와 Impact 폴백으로 @nuxtjs/fontaine을 설치합니다
    await installModule('@nuxtjs/fontaine', {
      // 모듈 설정
      fonts: [
        {
          family: 'Roboto',
          fallbacks: ['Impact'],
          fallbackName: 'fallback-a',
        }
      ]
    })
  }
})