Nuxt not automatically importing components from nested directory

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']
  },
})