Вложенный каталог nuxt 3 + Vite

Question

Я хочу использовать вложенный каталог в бета-версии nuxt 3 с vite.

В Nuxt 2 я использовал эту конфигурацию в (nuxt.config.js), и она работает:

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

У меня есть эта организация каталогов:

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

но я получил эту ошибку, когда я пытаюсь поставить <HeroSection/>в 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

он больше не работает в nuxt 3 и нужно сделать другую настройку? Потому что я ничего не нашел об этом в документе

Спасибо <3

Answer 1

Использование вложенных каталогов требует добавления имени каталога к компоненту:

      <template>
  <SectionsHeroSection />
</template>

С таким поведением вы можете быть менее сложными в именовании своих компонентов:

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

Чтобы мы могли использовать вот так

      <template>
  <SectionsHero />
</template>

Подробнее читайте в документах здесь: https://v3.nuxtjs.org/guide/directory-structure/components#component-names .

Answer 2

Я нашел это в документе:

      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/

Но это не работает с этой конфигурацией:

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