modules

modules/ 디렉토리를 사용하여 애플리케이션 내에서 로컬 모듈을 자동으로 등록할 수 있습니다.

애플리케이션을 개발하면서 직접 만든 로컬 모듈을 두기에 좋은 위치입니다.

자동으로 등록되는 파일 패턴은 다음과 같습니다:

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

이러한 로컬 모듈들은 nuxt.config.ts에 따로 추가할 필요가 없습니다.

// `nuxt/kit`은 로컬 모듈을 정의할 때 사용할 수 있는 헬퍼 서브패스 import입니다.
// 즉, 프로젝트의 dependencies에 `@nuxt/kit`을 추가할 필요가 없습니다.
import { createResolver, defineNuxtModule, addServerHandler } from 'nuxt/kit'

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

    // API 라우트 추가
    addServerHandler({
      route: '/api/hello',
      handler: resolver.resolve('./runtime/api-route')
    })
  }
})

Nuxt를 시작하면, hello 모듈이 등록되고 /api/hello 라우트를 사용할 수 있게 됩니다.

모듈은 다음 순서로 실행됩니다:

  • 먼저, nuxt.config.ts에 정의된 모듈이 로드됩니다.
  • 그 다음, modules/ 디렉토리에서 찾은 모듈이 실행되며, 알파벳 순서대로 로드됩니다.

각 디렉토리 이름 앞에 숫자를 붙여 로컬 모듈의 순서를 변경할 수 있습니다:

디렉토리 구조
modules/
  1.first-module/
    index.ts
  2.second-module.ts
Read more in Docs > Guide > Going Further > Modules.
Nuxt 프라이빗 모듈에 대한 Vue School 영상을 시청하세요.