Utilisation du répertoire imbriqué de Vite Nuxt 3

Question

Je souhaite utiliser les répertoires imbriqués de vite dans nuxt 3 beta.

Dans Nuxt 2, j'ai utilisé cette configuration dans (nuxt.config.js) et ça marche :

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

J'ai cette organisation d'annuaire :

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

Mais lorsque j'essaie d'ajouter <HeroSection/> 放入 pages/index.vue, j'obtiens cette erreur.

[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

Est-ce que ça ne fonctionne plus dans nuxt 3 et nécessite une configuration supplémentaire ? Parce que je ne trouve rien à ce sujet dans la documentation

Merci<3

Answer 1

L'utilisation de répertoires imbriqués nécessite d'ajouter le nom du répertoire au composant :

Avec ce comportement, vous pouvez simplifier la complexité de la dénomination des composants :

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

Nous pouvons donc l'utiliser comme ça

En savoir plus dans la documentation ici : https://v3.nuxtjs.org/guide/directory-struct/components#component-names