Nuxt not automatically importing components from nested directory

Question

In my nuxt app, components in nested directories are not automatically importing as expected. For some of my components i have something like the following:

vue 2.6.12, nuxt 2.15.0

components\ Directory structure

TopArea\
--SomeComponent.vue

<template>
  <header class="header">
    <div>Hello</div>
    <SomeComponent />
  </header>
</template>

No other component in the application has the name SomeComponent. In the example above i get the error: Unknown custom element: <SomeComponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.. I can get around the issue by specifying the directory name before the component filename (TopAreaSomeComponent), use the prefix option in nuxt.config, or by manually importing the component. This is confusing because the docs state:

Nested Directories
If you have components in nested directories such as:
components/baseButton.vue
The component name will be based on its own filename. Therefore, the component will be:
<button />

It goes on to say "We recommend you use the directory name in the filename for clarity". But that seems like a rule than a recommendation. If i don't use the directory name as part of the filename, dynamic imports are not working for components in nested directories.

Is this an error in the docs or am I reading it wrong?

Answer 1

This may answered already. But to illustrate the solution to comers here here's the way according to docs:

<TopAreaSomeComponent />

if your components is nested deeply:

components / TopArea / SomeComponent.vue

https://nuxtjs.org/docs/directory-structure/components/#nested-directories