【Nuxt】 중첩 된 구성 요소를 자동으로 가져올 수 없게 된 문제

최근 어떤 애플리케이션을 만들어 보려고 Nuxt를 사용했을 때의 사건.

예를 들어, 디렉토리 구성은 이런 느낌이라고 한다.

디렉토리 구성 (일부)

.
├── components
│    ├── Hoge.vue
│    └── organisms
│         └── OSidebar.vue
└── pages
│    └── index.vue
└── nuxt.config.js

Nuxt는 v2.13부터 components 자동 가져오기까지 가능합니다.
이런 식으로 설정하면

nuxt.config.js

export default {
  components: true
}

components 디렉터리에서 만든 파일이 자동으로 가져올 수 있습니다.

pages/index.vue

<template>
  <div>
    <!-- components/Hoge.vueを自動import -->
    <Hoge />

    <!-- components/organisms/OSidebar.vueを自動import -->
    <OSidebar />
  </div>
</template>

<script>
export default {}
</script>

발생한 문제

위와 같이 nuxt.config.js를 설정하면 특히 문제없이 사용할 수있었습니다 만, 이번에는 왜[Vue warn]: Unknown custom element: <OSidebar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.라는 오류가 발생했습니다.
components 디렉토리하의 Hoge.vue 는 문제 없었지만, Organisms 컴퍼넌트로 한층 더 중첩하고 있다 OSidebar.vue 에 문제가 있는 것 같습니다.

문제의 원인

issue 있었다.

구체적인 해결책, 이라고 할까 버전의 문제의 이행 방법은 이쪽 에 있었습니다.

아무래도 Nuxt v1.15부터는 자동 import의 방법이 바뀐 것 같습니다.@nuxt/components 라는 모듈의 메이저 버전 업에 의한 것도 싶습니다.

내가 이번에 사용했던 Nuxt 버전이 1.15 이상이었기 때문에 이것을 해결해야했습니다!

해결 방법

구체적인 해결 방법으로는 여러 가지 방법이 있습니다.
@nuxt/components 의 문서의 「Migration guide」와 부분에는

Full path inside components is used to prefix component names.
If you were structing your components in multiple directories, should either add prefix or register in components section of nuxt.config or use new pathPrefix option.

라는 설명이 있었습니다.
글쎄, 즉이 설명에서 세 가지 해결책을 알 수 있다고 생각합니까?

① components 디렉토리 이후의 디렉토리명은, prefix로서 파일명의 앞에 붙여 사용
② nuxt.confing 의 components 섹션에 등록
③ nuxt.confing 의 components 섹션에 pathPrefix 옵션 설정

(시간 없는 사람은 우선 ③을 보면 좋을지도)

상단 디렉토리 구성을 다시 확인

디렉토리 구성 (일부)

.
├── components
│    ├── Hoge.vue
│    └── organisms
│         └── OSidebar.vue
└── pages
│    └── index.vue
└── nuxt.config.js

① components 디렉토리 이후의 디렉토리명은, prefix로서 파일명의 앞에 붙는다

OSidebar.vue 를 예로 하면, components 디렉토리 이후의 디렉토리는 organisms 디렉토리가 해당.
사용하고 싶은 파일명은 OSidebar.vue 그래서, organisms 디렉토리를 prefix에 붙이면 OK.

즉, organismsOSidebar라는 이름으로 자동 import를 할 수 있습니다.

pages/index.vue

<template>
  <div>
    <Hoge />

    <!-- components/organisms/OSidebar.vueを自動import -->
    <organismsOSidebar />
  </div>
</template>

<!-- 以下省略 -->

② nuxt.confing의 components 섹션에 등록

nuxt.confing 의 components 섹션에 디렉토리를 등록해 주는 것도 OK입니다.

nuxt.config.js

export default {
  components: ['@/components/organisms']
}

이제 components 디렉토리 아래의 organisms 디렉토리의 파일을 OSidebar라는 이름으로 자동 import할 수 있습니다.

pages/index.vue

<template>
  <div>
    <!-- components/organisms/OSidebar.vueを自動import -->
    <OSidebar />
  </div>
</template>

<!-- 以下省略 -->

이것은 ①의 방법보다 이름이 길어지지 않고 끝납니다.

주의점
그러나 주의점으로서, 디렉토리 마다 매회 등록할 필요가 있습니다.

nuxt.config.js

export default {
  components: [
    '@/components', // componentsディレクトリ配下のファイルを自動importしたい場合
    '@/components/molecules', // components/moleculesディレクトリ内のファイルを自動importしたい場合
    '@/components/organisms',
  ]
}

③ nuxt.confing의 components 섹션에 pathPrefix 옵션을 설정

마지막으로 nuxt.confing 의 components 섹션에 pathPrefix 옵션을 설정하는 방법을 소개합니다.

nuxt.config.js

export default {
  components: [
    {
      path: '@/components',
      pathPrefix: false,
    },
  ],
}

이렇게하면 components 디렉토리 아래의 (중첩 된 파일을 포함) 모든 파일이 자동으로 가져옵니다.

pages/index.vue

<template>
  <div>
    <Hoge />

    <!-- components/organisms/OSidebar.vueを自動import -->
    <OSidebar />
  </div>
</template>

<!-- 以下省略 -->

나는 편해서 ③을 선택해 무사히 해결했습니다~.
이상입니다! 도움이되면 다행입니다!