[Nuxt.js] 구성 요소 자동 가져오기

구성 요소의 import 및 선언

Vue.jus 및 이전 버전의 Nuxtjs에서 구성 요소를 사용하기 위해서는 다음과 같은 기술이 필요합니다.

import Header from '@/components/Header.vue'

export default {
  components: {
    Header
  }
}

구성 요소 자동 가져오기

Nuxt.js v2.13 이상의 표준 모듈은nuxt/components를 포함하고 상기 기술이 필요하지 않습니다.
자동 가져오기를 활성화하려면 nuxt.config.js를 참조하십시오.

module.exports = {
  components: true
}

.vue를 자동으로 불러옵니다. 구성 요소 탭 <Header /> 을 사용할 수 있습니다.

components의 부하가 등급화될 때의 대응

Nuxt.js v2.15(nuxt/componentsv2) 이후components 아래에서 디렉터리를 끊을 때 구성 요소 이름의 지정 방법이 변경됩니다. 주의하십시오.
어셈블리 이름에 디렉토리 이름을 추가하려면 다음과 같은 태그를 사용해야 합니다.

<!-- /components/headers/DefaultHeader.vueを使用する場合 -->
<HeadersDefaultHeader />

언뜻 보기에는 불편하지만 상기 규격에 따라 디렉터리에 동명의 구성 요소가 존재할 수 있다.
모든 부품 이름을 계층화할 수 있는 경우nuxt.config.js는 다음과 같이 설정합니다.

module.exports = {
  components: [
    {
      path: '@/components/',
      pathPrefix: false
    }
  ]
}