모듈

Nuxt 모듈 살펴보기

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

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

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

Nuxt 모듈 추가하기

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

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

    // 로컬 모듈 로드
    './modules/example',

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

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

Nuxt 모듈 만들기

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