컴포넌트

Nuxt Kit은 컴포넌트 작업을 도와주는 다양한 유틸리티를 제공합니다. 컴포넌트를 전역 또는 로컬로 등록할 수 있으며, 컴포넌트를 스캔할 디렉토리를 추가할 수도 있습니다.

컴포넌트는 Nuxt 애플리케이션의 빌딩 블록입니다. 컴포넌트는 재사용 가능한 Vue 인스턴스로, 사용자 인터페이스를 만드는 데 사용할 수 있습니다. Nuxt에서는 기본적으로 components 디렉토리의 컴포넌트가 자동으로 임포트됩니다. 하지만, 대체 디렉토리에서 컴포넌트를 임포트하거나 필요에 따라 선택적으로 임포트하고 싶다면, @nuxt/kit에서 제공하는 addComponentsDir 및 addComponent 메서드를 사용할 수 있습니다. 이러한 유틸리티를 통해 컴포넌트 구성을 더욱 유연하게 맞춤 설정할 수 있습니다.

컴포넌트 및 컴포넌트 디렉토리 주입에 관한 Vue School 영상을 시청하세요.

`addComponentsDir`

컴포넌트를 스캔하고 사용될 때만 임포트할 디렉토리를 등록합니다. 참고로, global: true 옵션을 지정하지 않는 한 컴포넌트가 전역으로 등록되지는 않습니다.

사용법

export default defineNuxtModule({
  meta: {
    name: '@nuxt/ui',
    configKey: 'ui',
  },
  setup() {
    addComponentsDir({
      path: resolve('./runtime/components'),
      prefix: 'U',
      pathPrefix: false
    })
  }
})

타입

function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {}): void

파라미터

dir 다음과 같은 속성을 가진 객체입니다:

속성	타입	필수	설명
`path`	`string`	`true`	컴포넌트가 포함된 디렉토리의 경로(절대 또는 상대). Nuxt 별칭(~ 또는 @)을 사용하여 프로젝트 내부 디렉토리를 참조하거나 require와 유사하게 npm 패키지 경로를 직접 사용할 수 있습니다.
`pattern`	`string \| string[]`	`false`	지정된 경로에 대해 실행될 패턴을 허용합니다.
`ignore`	`string[]`	`false`	지정된 경로에 대해 실행될 무시 패턴입니다.
`prefix`	`string`	`false`	일치하는 모든 컴포넌트에 이 문자열을 접두사로 붙입니다.
`pathPrefix`	`boolean`	`false`	컴포넌트 이름에 경로를 접두사로 붙입니다.
`enabled`	`boolean`	`false`	`true`로 설정하면 이 디렉토리의 스캔을 무시합니다.
`prefetch`	`boolean`	`false`	이 속성들(prefetch/preload)은 프로덕션 환경에서 Lazy 접두사가 붙은 컴포넌트가 webpack의 매직 코멘트로 어떻게 처리되는지 설정하는 데 사용됩니다. 자세한 내용은 webpack 문서에서 확인하세요.
`preload`	`boolean`	`false`	이 속성들(prefetch/preload)은 프로덕션 환경에서 Lazy 접두사가 붙은 컴포넌트가 webpack의 매직 코멘트로 어떻게 처리되는지 설정하는 데 사용됩니다. 자세한 내용은 webpack 문서에서 확인하세요.
`isAsync`	`boolean`	`false`	이 플래그가 설정되면 Lazy 접두사 사용 여부와 관계없이 컴포넌트가 비동기로(별도의 청크로) 로드됩니다.
`extendComponent`	`(component: Component) => Promise<Component \| void> \| (Component \| void)`	`false`	디렉토리에서 찾은 각 컴포넌트에 대해 호출되는 함수입니다. 컴포넌트 객체를 받아 컴포넌트 객체 또는 해당 객체로 resolve되는 프로미스를 반환해야 합니다.
`global`	`boolean`	`false`	활성화하면 컴포넌트를 전역에서 사용할 수 있도록 등록합니다.
`island`	`boolean`	`false`	활성화하면 컴포넌트를 아일랜드로 등록합니다. 아일랜드에 대한 자세한 내용은 `<NuxtIsland/>` 컴포넌트 설명을 참고하세요.
`watch`	`boolean`	`false`	파일 추가 및 삭제를 포함하여 지정된 경로의 변경 사항을 감시합니다.
`extensions`	`string[]`	`false`	Nuxt 빌더가 지원하는 확장자입니다.
`transpile`	`'auto' \| boolean`	`false`	build.transpile을 사용하여 지정된 경로를 트랜스파일합니다. `'auto'`로 설정하면 경로에 `node_modules/`가 포함된 경우 `transpile: true`로 설정됩니다.

opts

속성	타입	필수	설명
`prepend`	`boolean`	`false`	`true`로 설정하면 디렉토리가 `push()` 대신 `unshift()`로 배열 앞에 추가됩니다.

`addComponent`

컴포넌트를 자동 임포트 대상으로 등록합니다.

사용법

import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: '@nuxt/image',
    configKey: 'image',
  },
  async setup() {
    const resolver = createResolver(import.meta.url)

    addComponent({
      name: 'NuxtImg',
      filePath: resolver.resolve('./runtime/components/NuxtImg.vue'),
    })

    addComponent({
      name: 'NuxtPicture',
      filePath: resolver.resolve('./runtime/components/NuxtPicture.vue'),
    })
  },
})

타입

function addComponent (options: AddComponentOptions): void

파라미터

options: 다음과 같은 속성을 가진 객체입니다:

속성	타입	필수	설명
`name`	`string`	`true`	컴포넌트 이름.
`filePath`	`string`	`true`	컴포넌트 경로.
`pascalName`	`string`	`false`	파스칼 케이스 컴포넌트 이름. 제공하지 않으면 컴포넌트 이름에서 생성됩니다.
`kebabName`	`string`	`false`	케밥 케이스 컴포넌트 이름. 제공하지 않으면 컴포넌트 이름에서 생성됩니다.
`export`	`string`	`false`	명명된 또는 기본 익스포트를 지정합니다. 제공하지 않으면 `'default'`로 설정됩니다.
`shortPath`	`string`	`false`	컴포넌트의 짧은 경로. 제공하지 않으면 컴포넌트 경로에서 생성됩니다.
`chunkName`	`string`	`false`	컴포넌트의 청크 이름. 제공하지 않으면 컴포넌트 이름에서 생성됩니다.
`prefetch`	`boolean`	`false`	이 속성들(prefetch/preload)은 프로덕션 환경에서 Lazy 접두사가 붙은 컴포넌트가 webpack의 매직 코멘트로 어떻게 처리되는지 설정하는 데 사용됩니다. 자세한 내용은 webpack 문서에서 확인하세요.
`preload`	`boolean`	`false`	이 속성들(prefetch/preload)은 프로덕션 환경에서 Lazy 접두사가 붙은 컴포넌트가 webpack의 매직 코멘트로 어떻게 처리되는지 설정하는 데 사용됩니다. 자세한 내용은 webpack 문서에서 확인하세요.
`global`	`boolean`	`false`	활성화하면 컴포넌트를 전역에서 사용할 수 있도록 등록합니다.
`island`	`boolean`	`false`	활성화하면 컴포넌트를 아일랜드로 등록합니다. 아일랜드에 대한 자세한 내용은 `<NuxtIsland/>` 컴포넌트 설명을 참고하세요.
`mode`	`'client' \| 'server' \| 'all'`	`false`	이 옵션은 컴포넌트가 클라이언트, 서버 또는 둘 다에서 렌더링되어야 하는지 나타냅니다. 기본적으로는 클라이언트와 서버 모두에서 렌더링됩니다.
`priority`	`number`	`false`	컴포넌트의 우선순위. 동일한 이름의 컴포넌트가 여러 개 있을 경우, 우선순위가 가장 높은 컴포넌트가 사용됩니다.

예시

npm 패키지에서 컴포넌트를 자동 임포트하고 싶고, 해당 컴포넌트가 기본 익스포트가 아닌 명명된 익스포트라면, export 옵션을 사용하여 지정할 수 있습니다.

import { addComponent, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package'
    addComponent({
      name: 'MyAutoImportedComponent',
      export: 'MyComponent',
      filePath: 'my-npm-package',
    })
  },
})