Nuxt.jsのコンポーネントが自動で読み込まれない件

はじめに

componentsの自動読み込みで躓いたので備忘録を残します。

[対象]
Nuxt.js　v2.15〜

目次

1. componentsの自動読み込
2. 自動読み込みの設定
3. ネストになっている場合
4. [参考]

componentsの自動読み込み

Nuxt.jsの自動インポートはv2.13から新しく追加された機能です。
componentsを読み込ませたい対象ファイルで、<ファイル名 />とするだけでimportせずとも読み込むことができ、import地獄から抜け出せる優れものです。

このようにするだけでwelAppBar.vueファイルを読み込むことができます。素晴らしいです。

components自動読み込みの設定

export default内で上記のようにして自動読み込みを有効化します。最後にカンマを忘れずにつけましょう。たったこれだけで先ほどのように<ファイル名 />で呼び出すことだできます

ネストになっている場合

Nuxt.js v2.15以上ではcomponentsファイルがネスト構造になっている場合、呼び出し時にcomponents以下のディレクトリ名も記載しなくてはいけません。（ここで躓きました）
自動読み込み機能が追加された当初はディレクトリ名は記載しなくても良かったのですが、v2.15以上からの仕様となっているので気をつけて実装していきたいです。

components/base/foo/Button.vue

参考文献

-Nuxt.js公式