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

defineNuxtModule

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

사용법

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  defaults: {
    enabled: true
  },
  setup (options) {
    if (options.enabled) {
      console.log('My Nuxt module is enabled!')
    }
  }
})

타입

// @errors: 2391
import type { ModuleDefinition, ModuleOptions, NuxtModule } from '@nuxt/schema'
// ---cut---
export function defineNuxtModule<TOptions extends ModuleOptions> (
  definition?: ModuleDefinition<TOptions, Partial<TOptions>, false> | NuxtModule<TOptions, Partial<TOptions>, false>,
): NuxtModule<TOptions, TOptions, false>

매개변수

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

예제

configKey를 사용하여 모듈을 구성 가능하게 만들기

Nuxt 모듈을 정의할 때, 사용자가 nuxt.config에서 모듈을 어떻게 구성해야 하는지를 지정하기 위해 configKey를 설정할 수 있습니다.

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-module',
    configKey: 'myModule'
  },
  defaults: {
    // 모듈 옵션
    enabled: true
  },
  setup (options) {
    if (options.enabled) {
      console.log('My Nuxt module is enabled!')
    }
  }
})

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

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

모듈 호환성 요구 사항 정의

특정 Nuxt 버전에서만 지원되는 API를 사용하는 Nuxt 모듈을 개발하는 경우, 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  Module @nuxt/icon is disabled due to incompatibility issues:
 - [nuxt] Nuxt version ^3.1.0 is required but currently using 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)

매개변수

예제

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