経緯

Nuxt.jsで開発していて、（別にNuxt.jsに限ったことではないけれど）
当初描いていた未来と、実際の未来は違った形をたどり、
componentsディレクトリの中がカオス状態・・・
まだまだどうなっていくのかわからないので、一回整理したい。
しかし、全てimportのパスを置き換えるのか・・？

どうしようかと思っていたとき、
コンポーネントをグローバルに使えるようにできるのでは？と思って調べたら、
なんと、そういうモジュールを発見！（@nuxtjs/global-components）
さらにたどっていくと、Nuxt.js 2.13+から標準搭載されると書かれていた！

古いバージョンでもモジュールをインストールすれば使えるらしい！
しかしまだやり方をまとめている記事があまりなかったので、気づいたことなどを書きます。

@nuxt/componentsとは

@nuxt/components

Auto import components in Nuxt.js

ということなので、自動でコンポーネントをインポートしてくれるそうだ！

これだけで、使えるようになるらしい

nuxt.config.js

export default {
  components: true
}

例えばこんなコンポーネントをつくったら

components/
  ComponentFoo.vue
  component-bar.vue

これだけで読み込めるそうです。

<template>
  <ComponentFoo />
  <component-bar />
</template>

importでファイルを読み込み、componentsに記述するということをしなくて良くなります。

古いバージョンでの使い方

私の環境のNuxt.jsのバージョンは2.12.2です。

@nuxt/componentsのインストール

npm install --save-dev @nuxt/components

nuxt.config.jsに追記

nuxt.config.js

{
  modules: [
    '@nuxt/components'
  ],
  components: [
    '~/components/'
  ]
}

これであとはコンポーネントにファイルを追加し、使えるようになります。
最低限は以上だと思います。
オプションでさらに便利に設定できます。

私が引っかかったこと

nuxt.config.jsの書き方

Nuxt.js 2.9からbuildModulesが推奨されているが、開発している環境は、それに書き換えていなかった。
また、components: ['~/components/']の部分も記載しないと動かなかった。

コンポーネントファイルの命名規則

特にオプションを設定しない場合は、ファイル名がそのままコンポーネント呼び出しタグになるみたいだが、
パスカルケースかケバブケースでないといけないみたい。（キャメルはダメ）
もともとのファイルが、スネークケースだったため、うまく読み込まれなかった。
パスカルかケバブかはどちらでもいいようで、ファイル名がパスカル、タグがケバブでも問題ない。
headerなどのもともとあるHTMLタグと同じ名前でも、<header />と書けばコンポーネントタグとして使えるよう。

コンポーネントタグの最後のスラッシュは必要

<ComponentFoo />を<ComponentFoo>とするとエラーになる。
<ComponentFoo></ComponentFoo>でも問題なし。

まとめ

以上、めっちゃ楽になりました！
これで、あーこれディレクトリ移動したいってなっても、特に気にすることなく整理し直すことができます。

参考

https://qiita.com/JDM/items/afb5171594f69bcd94bd
https://ja.nuxtjs.org/api/configuration-modules/