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
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
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
})
}
}