モジュールは 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 モジュールを定義する際に、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('My Nuxt module is enabled!')
    }
  }
})

ユーザーは nuxt.config の対応するキーの下でこのモジュールのオプションを提供できます。

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

モジュールの互換性要件を定義する

Nuxt モジュールを開発していて、特定の Nuxt バージョンでのみサポートされている API を使用している場合、compatibility.nuxt を含めることを強くお勧めします。

export default defineNuxtModule({
  meta: {
    name: '@nuxt/icon',
    configKey: 'icon',
    compatibility: {
      // 必要な nuxt バージョン（semver 形式）。
      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',
        }
      ]
    })
  }
})

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'my-logger',
    configKey: 'logger'
  },
  defaults: {
    level: 'info'
  },
  setup(options, nuxt) {
    nuxt.hook('app:created', () => {
      console.log(`[Logger] ログレベルは ${options.level} に設定されています。`)
    })
  }
})

export default defineNuxtConfig({
  logger: {
    level: 'debug'
  }
})

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

export default defineNuxtModule({
  async setup() {
    await installModule('@nuxtjs/axios', {
      baseURL: 'https://api.example.com'
    })
  }
})

export default defineNuxtModule({
  meta: {
    name: 'my-advanced-module',
    configKey: 'advancedModule',
    compatibility: {
      nuxt: '>=3.1.0'
    }
  },
  setup() {
    // 実装
  }
})