컴포넌트

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 다음 속성을 가진 객체:

Property	Type	Required	Description
`path`	`string`	`true`	컴포넌트를 포함하는 디렉터리의 경로(절대 또는 상대). 프로젝트 내부 디렉터리를 가리키기 위해 Nuxt 별칭(~ 또는 @)을 사용할 수 있으며, `require`와 유사하게 npm 패키지 경로를 직접 사용할 수도 있습니다.
`pattern`	`string \| string[]`	`false`	지정된 경로에 대해 실행될 패턴을 허용합니다.
`ignore`	`string[]`	`false`	지정된 경로에 대해 실행될 무시 패턴입니다.
`prefix`	`string`	`false`	일치하는 모든 컴포넌트 이름 앞에 이 문자열을 접두사로 붙입니다.
`pathPrefix`	`boolean`	`false`	컴포넌트 이름 앞에 해당 경로를 접두사로 붙입니다.
`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

Property	Type	Required	Description
`prepend`	`boolean`	`false`	`true`로 설정하면, 디렉터리가 `push()` 대신 `unshift()`로 배열의 앞쪽에 추가됩니다.

`addComponent`

컴포넌트를 자동 임포트되도록 등록합니다.

사용법

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

export default defineNuxtModule({
  meta: {
    name: '@nuxt/image',
    configKey: 'image',
  },
  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: 다음 속성을 가진 객체:

Property	Type	Required	Description
`name`	`string`	`true`	컴포넌트 이름.
`filePath`	`string`	`true`	컴포넌트 경로.
`declarationPath`	`string`	`false`	컴포넌트 선언 파일의 경로입니다. 컴포넌트의 타입 템플릿을 생성하는 데 사용되며, 제공되지 않으면 대신 `filePath`가 사용됩니다.
`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',
    })
  },
})

Was this helpful?

Report an issue or Edit this page on GitHub

자동 임포트(Auto-imports)

Nuxt Kit은 자동 임포트 작업을 도와주는 유틸리티 세트를 제공합니다. 이 함수들을 사용하면 자신만의 유틸, composable, Vue API를 등록할 수 있습니다.

Context

Nuxt Kit은 컨텍스트와 함께 작업할 수 있도록 도와주는 유틸리티 모음을 제공합니다.