Nuxt 레이어는 모노레포 내에서, 또는 git 저장소나 npm 패키지에서 부분적인 Nuxt 애플리케이션을 공유하고 재사용할 수 있는 강력한 기능입니다. 레이어 구조는 표준 Nuxt 애플리케이션과 거의 동일하여 작성 및 유지보수가 용이합니다.

최소한의 Nuxt 레이어 디렉토리는 레이어임을 나타내기 위해 nuxt.config.ts 파일을 포함해야 합니다.

export default defineNuxtConfig({})

또한, 레이어 디렉토리 내의 특정 파일들은 자동으로 스캔되어 이 레이어를 확장하는 프로젝트에서 Nuxt에 의해 사용됩니다.

• components/* - 기본 컴포넌트 확장
• composables/* - 기본 컴포저블 확장
• layouts/* - 기본 레이아웃 확장
• pages/* - 기본 페이지 확장
• plugins/* - 기본 플러그인 확장
• server/* - 기본 서버 엔드포인트 및 미들웨어 확장
• utils/* - 기본 유틸리티 확장
• nuxt.config.ts- 기본 nuxt 설정 확장
• app.config.ts - 기본 앱 설정 확장

기본 예제

export default defineNuxtConfig({
  extends: [
    './base'
  ]
})

시작 템플릿

시작하려면 nuxt/starter/layer 템플릿을 사용하여 레이어를 초기화할 수 있습니다. 이를 통해 구축할 수 있는 기본 구조가 생성됩니다. 시작하려면 터미널에서 다음 명령을 실행하세요:

npm create nuxt -- --template layer nuxt-layer

다음 단계에 대한 README 지침을 따르세요.

레이어 게시

원격 소스나 npm 패키지를 사용하여 레이어를 게시하고 공유할 수 있습니다.

Git 저장소

Git 저장소를 사용하여 Nuxt 레이어를 공유할 수 있습니다. 몇 가지 예:

export default defineNuxtConfig({
  extends: [
    'github:username/repoName',        // GitHub 원격 소스
    'github:username/repoName/base',   // /base 디렉토리 내의 GitHub 원격 소스
    'github:username/repoName#dev',    // dev 브랜치의 GitHub 원격 소스
    'github:username/repoName#v1.0.0', // v1.0.0 태그의 GitHub 원격 소스
    'gitlab:username/repoName',        // GitLab 원격 소스 예시
    'bitbucket:username/repoName',     // Bitbucket 원격 소스 예시
  ]
})

export default defineNuxtConfig({
  extends: [
    ['github:username/repoName', { install: true }]
  ]
})

npm 패키지

Nuxt 레이어를 확장할 파일과 종속성을 포함하는 npm 패키지로 게시할 수 있습니다. 이를 통해 설정을 다른 사람과 공유하거나 여러 프로젝트에서 사용하거나 비공개로 사용할 수 있습니다.

npm 패키지에서 확장하려면, 모듈이 npm에 게시되고 사용자의 프로젝트에 devDependency로 설치되어 있어야 합니다. 그런 다음 모듈 이름을 사용하여 현재 nuxt 설정을 확장할 수 있습니다:

export default defineNuxtConfig({
  extends: [
    // 스코프가 있는 노드 모듈
    '@scope/moduleName',
    // 또는 모듈 이름만
    'moduleName'
  ]
})

레이어 디렉토리를 npm 패키지로 게시하려면, package.json에 올바른 속성이 채워져 있는지 확인해야 합니다. 이렇게 하면 패키지가 게시될 때 파일이 포함됩니다.

{
  "name": "my-theme",
  "version": "1.0.0",
  "type": "module",
  "main": "./nuxt.config.ts",
  "dependencies": {},
  "devDependencies": {
    "nuxt": "^3.0.0"
  }
}

이제 모듈을 npm에 공개 또는 비공개로 게시할 수 있습니다.

팁

명명된 레이어 별칭

자동 스캔된 레이어(~~/layers 디렉토리에서)는 자동으로 별칭을 생성합니다. 예를 들어, ~~/layers/test 레이어에 #layers/test로 접근할 수 있습니다.

다른 레이어에 대한 명명된 레이어 별칭을 생성하려면, 레이어의 설정에서 이름을 지정할 수 있습니다.

export default defineNuxtConfig({
  $meta: {
    name: 'example',
  },
})

이렇게 하면 레이어를 가리키는 #layers/example 별칭이 생성됩니다.

상대 경로와 별칭

레이어 컴포넌트와 컴포저블에서 전역 별칭(예: ~/ 및 @/)을 사용하여 가져올 때, 이러한 별칭은 사용자의 프로젝트 경로를 기준으로 해석됩니다. 해결책으로, 상대 경로를 사용하여 가져오거나 명명된 레이어 별칭을 사용할 수 있습니다.

또한 레이어의 nuxt.config 파일에서 상대 경로를 사용할 때, (중첩된 extends를 제외하고) 이는 레이어가 아닌 사용자의 프로젝트를 기준으로 해석됩니다. 해결책으로, nuxt.config에서 전체 해석된 경로를 사용하세요:

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/main.css')
  ]
})

Nuxt 모듈에 대한 다중 레이어 지원

내부 배열 nuxt.options._layers를 사용하여 모듈에 대한 사용자 정의 다중 레이어 처리를 지원할 수 있습니다.

export default defineNuxtModule({
  setup(_options, nuxt) {
    for (const layer of nuxt.options._layers) {
      // 각 레이어에 대해 확장할 사용자 정의 디렉토리 존재 여부를 확인할 수 있습니다
      console.log('Custom extension for', layer.cwd, layer.config)
    }
  }
})

참고 사항:

• _layers 배열의 앞쪽 항목이 우선순위가 높으며 나중 항목을 덮어씁니다.
• 사용자의 프로젝트는 _layers 배열의 첫 번째 항목입니다.

더 깊이 알아보기

구성 로딩 및 확장 지원은 unjs/c12에 의해 처리되며, unjs/defu를 사용하여 병합되고, 원격 git 소스는 unjs/giget를 사용하여 지원됩니다. 자세한 내용을 알아보려면 문서와 소스 코드를 확인하세요.