Using Vite’s Nested Directory Nuxt 3

Question

I want to use vite's nested directories in nuxt 3 beta.

In Nuxt 2 I used this config in (nuxt.config.js) and it works:

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

I have this directory organization:

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

But I get this error when I try to put <HeroSection/> into 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 requires additional configuration? Because I can't find anything related in the documentation

Thanks<3

Answer 1

Using nested directories requires adding the directory name to the component:

With this behavior, you can simplify the complexity of component naming:

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

So we can use it like this

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