modules

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

애플리케이션을 개발하면서 생성한 로컬 모듈을 배치하기에 좋은 장소입니다.

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

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

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

// `nuxt/kit`은 로컬 모듈을 정의할 때 사용할 수 있는 헬퍼 서브패스 import입니다.
// 이는 프로젝트의 종속성에 `@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/ 디렉토리에서 발견된 모듈이 알파벳 순서로 실행됩니다.

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

Directory structure

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

이것도 참고 guide > going-further > modules

Nuxt 프라이빗 모듈에 대한 Vue School 비디오를 시청하세요.

※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.

공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/guide/directory-structure/modules