【Nuxt】ネストしたcomponentsを自動インポート出来なくなってしまった件

最近とあるアプリケーションを作ってみようとして、Nuxtを使っていた時の出来事。

例えば、ディレクトリ構成はこんな感じだとする。

```:ディレクトリ構成(一部)
.
├── components
│    ├── Hoge.vue
│    └── organisms
│         └── OSidebar.vue
└── pages
│    └── index.vue
└── nuxt.config.js
```
Nuxtにはv2.13から[componentsを自動インポート](https://ja.nuxtjs.org/docs/2.x/directory-structure/components/#components-discovery)ができるようになりました。
こんな感じで設定すると:point_down:

```js:nuxt.config.js
export default {
  components: true
}
```
`components`ディレクトリで作成したファイルが、自動importできていました。

```vue: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ありました。

https://github.com/nuxt/nuxt.js/issues/8851

具体的な解決策、というかバージョンの問題の移行方法はこちら:point_down:にのっていました。

https://github.com/nuxt/components#migration-guide

どうやら**Nuxt v2.15**からは**自動importの方法が変わった**みたいです。
`@nuxt/components`というモジュールのメジャーバージョンアップによるものみたいです。

僕が今回使っていたNuxtのバージョンが2.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.

という記述がありました。
まあ、つまりこの記述から3つの解決策がわかるって感じですかね。

① `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ができます。

```vue:pages/index.vue
<template>
  <div>
    <Hoge />

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

<!-- 以下省略 -->
```

### ② `nuxt.confing`の`components`セクションに登録
`nuxt.confing`の`components`セクションにディレクトリを登録してあげるのもOKです。

```js:nuxt.config.js
export default {
  components: ['@/components/organisms']
}
```
これで`components`ディレクトリ配下の`organisms`ディレクトリ内のファイルが`OSidebar`という名前で自動import出来ます。

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

<!-- 以下省略 -->
```

これは①の方法よりも名前が長くならずに済みます。

**注意点**
しかし注意点として、ディレクトリごとに毎回登録する必要があります。

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

### ③ `nuxt.confing`の`components`セクションに`pathPrefix`オプションを設定
最後に`nuxt.confing`の`components`セクションに`pathPrefix`オプションを設定する方法を紹介します。

```js:nuxt.config.js
export default {
  components: [
    {
      path: '@/components',
      pathPrefix: false,
    },
  ],
}
```
これで、**`components`ディレクトリ配下の（ネストされているものも含めた）全てのファイルが自動import**されます。

```vue:pages/index.vue
<template>
  <div>
    <Hoge />

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

<!-- 以下省略 -->
```

僕は楽なので③を選んで無事解決しました〜。
以上です！役に立てたら幸いです！