컴포넌트는 Nuxt 애플리케이션의 구성 요소입니다. 이들은 사용자 인터페이스를 생성하는 데 사용할 수 있는 재사용 가능한 Vue 인스턴스입니다. Nuxt에서는 기본적으로 components 디렉토리의 컴포넌트가 자동으로 임포트됩니다. 그러나 대체 디렉토리에서 컴포넌트를 임포트하거나 필요에 따라 선택적으로 임포트하려는 경우, @nuxt/kit은 addComponentsDir 및 addComponent 메서드를 제공합니다. 이러한 유틸리티를 사용하면 컴포넌트 구성을 사용자 요구에 맞게 커스터마이즈할 수 있습니다.

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

opts

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

예제

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',
    })
  },
})