modules

애플리케이션 내에서 로컬 모듈을 자동으로 등록하기 위해 modules/ 디렉터리를 사용합니다.

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

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

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

이러한 로컬 모듈을 별도로 nuxt.config.ts에 추가할 필요는 없습니다.

// `nuxt/kit`은 로컬 모듈을 정의할 때 사용할 수 있는 헬퍼 서브패스 임포트입니다
// 즉, 프로젝트의 dependencies에 `@nuxt/kit`을 추가할 필요가 없습니다
import { addServerHandler, createResolver, defineNuxtModule } 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/ 디렉터리에서 발견된 모듈이 실행되며, 알파벳 순으로 로드됩니다.

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

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