最終更新日: 2023年08月15日

モジュール ディレクトリ

Nuxtはmodules/ディレクトリをスキャンし、アプリケーションの開始前にそれらを読み込みます。このディレクトリは、アプリケーションを構築する際に開発したローカルモジュールを配置するのに適した場所です。

自動登録されるファイルのパターンは次のとおりです:

  • modules/*/index.ts
  • modules/*.ts

それらのローカルモジュールをnuxt.config.tsに別途追加する必要はありません。

  • modules/hello/index.ts
  • ts
// nuxt/kitは、ローカルモジュールを定義する際に使用できる補助的なインポートです。
// これは、プロジェクトの依存関係に@nuxt/kitを追加する必要がないことを意味します。
import { createResolver, defineNuxtModule, addServerHandler } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'hello'
  },
  setup () {
    const { resolve } = createResolver(import.meta.url)

    // APIルートを追加してください
    addServerHandler({
      route: '/api/hello',
      handler: resolve('./runtime/api-route')
    })
  }
})
  • modules/hello/runtime/api-route.ts
  • ts
export default defineEventHandler(() => {
  return { hello: 'world' }
})

Nuxtを起動する際に、helloモジュールが登録され、/api/helloルートが利用可能になります。

ローカルモジュールはアルファベット順に登録されます。各ディレクトリの前に数字を付けることで順序を変更することができます。

  • ts
modules/
  1.first-module/
    index.ts
  2.second-module.ts