Nuxtのauto-importが効かない

コンポーネントをpageファイル内で使用しようと思ったところ下記のようなエラーが…

Unknown custom element: <Hoge> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

調べて見るところ、nuxtのissueで自分と同じような問題にあたっている人をみつけました。 https://github.com/nuxt/nuxt.js/issues/8851https://stackoverflow.com/questions/66336557/nuxt-not-automatically-importing-components-from-nested-directory
これはnuxt@2.15以降から、Nuxtは@nuxt/componentsv2を使用することになって、コンポーネントの名前解決の仕組みが変わった事によるものでした。 そのため、components/hoge/Hoge.vueのようなネストされたファイルでは自動import機能が働かずエラーとなっていました。
https://github.com/nuxt/components
この問題の対策としてはいくつかありますが、下にいくつか書いてみます。

1.nuxt.confingのcomponentsにprefix falseを付けてファイル名だけでimportさせる方法です。

components: [
  {
    path: '~/components',
    pathPrefix: false,
  },
]

しかしこれだと別ディレクトリに同名のものがあるとバッティングしてしまうので、思わぬ事故に繋がりそうです。
2.1の状態にプラスしてコンポーネントファイルを作成するときは必ずディレクトリ名 + ファイル名にする これであればバッティングする問題はなさそうです。
3.ディレクトリ名も付けて書く components/hoge/Hoge.vueでしたら、<HogeHoge>として自動importしてくれることを確認しました。 わざわざpathprefixをfalseにする必要がないのと、2と同じことをやっているので一番効率は良いかもです。
4.予めprefixを付与しておく nuxt.configに下記のようにprefixを付けて書く方式です。

export default {
  components: [
    '~/components', // shortcut to { path: '~/components' }
    { path: '~/components/awesome/', prefix: 'awesome' }
  ],
}

ディレクトリが増えるたびにprefixを付与しないと行けないので、ちょっと手間かなと思ってます。

まとめ

公式にも推奨として書いてありましたが、2のディレクトリ名を付けて書くのが一番良いかもしれません。