Nuxt.js（v15.0）からコンポーネントの自動インポートのルールが変わった模様 ✌️

久しぶりにNuxt.jsでプロジェクトを作成したところ、コンポーネントの自動インポート周りでエラーが起こりました。

結論

結論を先に書くと、Nuxt.js（v15.0）からnuxt/componentsがv2に切り替わったことと、僕がAtomic Designのルールにのっとり、componentsの中にディレクトリを作っていたことが原因で、migration-guideにある通り、

// nuxt.config.js
export default {
  components: [
    '~/components/templates',
    '~/components/atoms',
    '~/components/molecules',
    '~/components/organisms',
  ]
}

と設定すると解決しました。

ja.nuxtjs.org
github.com

なぜエラーが起こったのか

nuxt/componentsのv2で自動インポートのルールが変わり、ネストされたディレクトリに対して、パス名とファイル名を記述するようになったことが原因です。

ja.nuxtjs.org

つまり、

import Button from '~/compornent/atoms/RectButton';

を自動インポートで書く場合、

v1では、ファイル名だけで、

<RectButton />

v2ではパス名とファイル名で、

<AtomsRectButton />

と書くようになったわけです。

ディレクトリを分ければ同じファイル名が使えるようになったのが便利なような便利じゃないようなですが、moleclesだと思ってたけど、やっぱりorganismsにしようみたいなときにファイル名を変えなければならないデメリットも出てきます。

前述の通り、nuxt.config.jsに、

// nuxt.config.js
export default {
  components: [
    '~/components/templates',
    '~/components/atoms',
    '~/components/molecules',
    '~/components/organisms',
  ]
}

と設定してあげれば、パス名を省略できるようになるので、v1ライクに使いたい場合はこちらの設定がおすすめです。