Nuxt의 핵심 기능 중 하나는 레이어와 확장 지원입니다. 기본 Nuxt 애플리케이션을 확장하여 컴포넌트, 유틸리티, 설정을 재사용할 수 있습니다. 레이어 구조는 표준 Nuxt 애플리케이션과 거의 동일하여 작성 및 유지 관리가 용이합니다.

사용 사례

• nuxt.config 및 app.config를 사용하여 프로젝트 간에 재사용 가능한 설정 프리셋을 공유
• components/ 디렉토리를 사용하여 컴포넌트 라이브러리 생성
• composables/ 및 utils/ 디렉토리를 사용하여 유틸리티 및 컴포저블 라이브러리 생성
• Nuxt 모듈 프리셋 생성
• 프로젝트 간 표준 설정 공유
• Nuxt 테마 생성
• 모듈식 아키텍처를 구현하여 코드 조직을 개선하고 대규모 프로젝트에서 도메인 주도 설계(DDD) 패턴 지원

사용법

기본적으로, 프로젝트 내 ~~/layers 디렉토리에 있는 모든 레이어는 프로젝트의 레이어로 자동 등록됩니다.

또한, 각 레이어의 srcDir에 대한 이름이 지정된 레이어 별칭이 자동으로 생성됩니다. 예를 들어, ~~/layers/test 레이어에 #layers/test를 통해 접근할 수 있습니다.

또한, nuxt.config 파일에 extends 속성을 추가하여 레이어를 확장할 수 있습니다.

export default defineNuxtConfig({
  extends: [
    '../base',                     // 로컬 레이어에서 확장
    '@my-themes/awesome',          // 설치된 npm 패키지에서 확장
    'github:my-themes/awesome#v1', // git 저장소에서 확장
  ]
})

비공개 GitHub 저장소에서 확장하는 경우 인증 토큰을 전달할 수도 있습니다:

export default defineNuxtConfig({
  extends: [
    // 레이어별 설정
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
  ]
})

export default defineNuxtConfig({
  extends: [
    [
      'github:my-themes/awesome',
      { 
        meta: {
          name: 'my-awesome-theme',
        },
      },
    ],
  ]
})

Nuxt는 원격 레이어를 확장하기 위해 unjs/c12 및 unjs/giget를 사용합니다. 자세한 정보와 모든 사용 가능한 옵션은 문서를 참조하세요.

예시