모듈

Nuxt 모듈 살펴보기

Nuxt로 프로덕션급 애플리케이션을 개발할 때 프레임워크의 기본 기능만으로는 충분하지 않을 수 있습니다. Nuxt는 구성 옵션과 플러그인으로 확장할 수 있지만, 이러한 커스터마이징을 여러 프로젝트에서 유지하는 것은 번거롭고 반복적이며 시간이 많이 소요될 수 있습니다. 반면, 모든 프로젝트의 요구 사항을 기본적으로 지원한다면 Nuxt는 매우 복잡하고 사용하기 어려워질 것입니다.

이것이 Nuxt가 코어를 확장할 수 있는 모듈 시스템을 제공하는 이유 중 하나입니다. Nuxt 모듈은 비동기 함수로, nuxt dev를 사용해 개발 모드에서 Nuxt를 시작하거나 nuxt build로 프로덕션 빌드를 할 때 순차적으로 실행됩니다. 이들은 템플릿을 오버라이드하거나, webpack 로더를 구성하거나, CSS 라이브러리를 추가하거나, 그 외 다양한 유용한 작업을 수행할 수 있습니다.

무엇보다도, Nuxt 모듈은 npm 패키지로 배포할 수 있습니다. 이를 통해 여러 프로젝트에서 재사용하거나 커뮤니티와 공유할 수 있어, 고품질 애드온 생태계 조성에 도움이 됩니다.

Nuxt 모듈 추가하기

모듈을 설치한 후에는 nuxt.config.ts 파일의 modules 속성에 추가할 수 있습니다. 모듈 개발자는 일반적으로 사용법에 대한 추가 단계와 세부 정보를 제공합니다.

export default defineNuxtConfig({
  modules: [
    // 패키지 이름 사용 (권장 사용법)
    '@nuxtjs/example',

    // 로컬 모듈 불러오기
    './modules/example',

    // 인라인 옵션과 함께 모듈 추가
    ['./modules/example', { token: '123' }],

    // 인라인 모듈 정의
    async (inlineOptions, nuxt) => { }
  ]
})

Nuxt 모듈 만들기

누구나 모듈을 개발할 수 있으며, 여러분이 어떤 것을 만들지 기대하고 있습니다.