【Nuxt.js v2】コンポーネントの自動インポート

コンポーネントのimportと宣言

Vue.jsや古いバージョンのNuxt.jsでは、コンポーネントを使用するために以下のような記述が必要でした。

import Header from '@/components/Header.vue'

export default {
  components: {
    Header
  }
}

コンポーネントの自動インポート

Nuxt.js v2.13 以上では、nuxt/componentsというモジュールが標準で含まれていて、上記のような記述は不要となります。
自動インポートを有効にするには、nuxt.config.jsに以下のように記述します。

module.exports = {
  components: true
}

/components/配下の.vueを自動で読み込み、<Header />のようにコンポーネントタグが使用できるようになります。

components配下が階層化されている場合の対応

Nuxt.js v2.15(nuxt/components v2)以降では、components配下にディレクトリを切っている場合に、コンポーネント名の指定方法が変わるため注意してください。
以下のようにコンポーネント名にディレクトリ名を付与したタグを使う必要があります。

<!-- /components/headers/DefaultHeader.vueを使用する場合 -->
<HeadersDefaultHeader />

一見不便ですが、上記仕様により、異なるディレクトリであれば同名のコンポーネントを存在させることができます。

もし、階層化されていてもすべてコンポーネント名だけで指定できるようにしたい場合、nuxt.config.jsで以下のように設定します。

module.exports = {
  components: [
    {
      path: '@/components/',
      pathPrefix: false
    }
  ]
}