Nested directory nuxt 3 + Vite

Question

I want to use nested directory in nuxt 3 beta with vite.

In Nuxt 2 i was using this config in (nuxt.config.js) and it work :

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

I have this directory organisation:

| components
 - Header.vue
 - Footer.vue
 | sections
  - HeroSection.vue

but i got this error when i try to put <HeroSection/> in pages/index.vue.

[Vue warn]: Failed to resolve component: HeroSection
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Invalid value used as weak map key

does it no longer work in nuxt 3 and there is another configuration to do? Because I find nothing about it on the doc

Thank <3

Answer 1

I found this on the doc:

import { join } from 'pathe'
import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  hooks: {
    'components:dirs'(dirs) {
      // Add ./components dir to the list
      dirs.push({
        path: join(__dirname, 'components'),
        prefix: 'awesome'
      })
    }
  }
})

https://v3.nuxtjs.org/docs/directory-structure/components/

But it desn't work with this config:

hooks: {
    'components:dirs'(dirs) {
      // Add ./components dir to the list
      dirs.push({
        path: join(__dirname, 'components/sections'),
        prefix: false
      })
    }
  }

Answer 2

Using nested directories requires prepending the name of the directory onto the component:

<template>
  <SectionsHeroSection />
</template>

With this behavior you can be less complex about naming your components:

- components
    Header.vue
    Footer.vue
  - Sections
      Hero.vue

So that we can use like so

<template>
  <SectionsHero />
</template>

Read more in the docs here: https://v3.nuxtjs.org/guide/directory-structure/components#component-names