経緯
Nuxt.jsで開発していて、（別にNuxt.jsに限ったことではないけれど）
当初描いていた未来と、実際の未来は違った形をたどり、
componentsディレクトリの中がカオス状態・・・
まだまだどうなっていくのかわからないので、一回整理したい。
しかし、全てimportのパスを置き換えるのか・・？
どうしようかと思っていたとき、
コンポーネントをグローバルに使えるようにできるのでは？と思って調べたら、
なんと、そういうモジュールを発見！（@nuxtjs/global-components）
さらにたどっていくと、Nuxt.js 2.13+から標準搭載されると書かれていた！
古いバージョンでもモジュールをインストールすれば使えるらしい！
しかしまだやり方をまとめている記事があまりなかったので、気づいたことなどを書きます。
@nuxt/componentsとは
Auto import components in Nuxt.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に追記
{
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/