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

Since Nuxt 2.15.0, components changed in the way they work as stated in this github issue.

Depending of you structure and how you want to handle your organization, you may edit your configuration accordingly to the migration guide available here: https://github.com/nuxt/components#v1-to-v2

Or you could also simply set the pathPrefix option to have all your components available without any prefix at all.

nuxt.config.js/ts

components: [
  {
    path: '~/components', // will get any components nested in let's say /components/test too
    pathPrefix: false,
  },
]

PS: this solution also works with Nuxt3.

This documentation actually do need an update, indeed: https://nuxtjs.org/docs/2.x/directory-structure/components#components-discovery

---

This is how it works: for a given page

<template>
  <div>
    <yolo-swag /> <!-- no need for <nested-yolo-swag /> here -->
  </div>
</template>

And with the following file tree

---

Update for Nuxt3

Looks like this is the new official syntax

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  components: {
    global: true,
    dirs: ['~/components']
  },
})

Answer 2

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