Quiero usar el directorio anidado en nuxt 3 beta con vite.
En Nuxt 2 estaba usando esta configuración en (nuxt.config.js) y funciona:
components: [ { path: '~/components', // will get any components nested in let's say /components/test too pathPrefix: false, },],Tengo esta organización de directorio:
| components - Header.vue - Footer.vue | sections - HeroSection.vue pero recibí este error cuando intento poner <HeroSection/> en 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 keyya no funciona en nuxt 3 y hay que hacer otra configuracion? Porque no encuentro nada al respecto en el documento.
Gracias <3
El uso de directorios anidados requiere anteponer el nombre del directorio al componente:
<template> <SectionsHeroSection /> </template>Con este comportamiento, puede ser menos complejo al nombrar sus componentes:
- components Header.vue Footer.vue - Sections Hero.vuePara que podamos usar así
<template> <SectionsHero /> </template>Lea más en los documentos aquí: https://v3.nuxtjs.org/guide/directory-structure/components#component-names
Encontré esto en el documento:
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/directorio-estructura/componentes/
Pero no funciona con esta configuración:
hooks: { 'components:dirs'(dirs) { // Add ./components dir to the list dirs.push({ path: join(__dirname, 'components/sections'), prefix: false }) } }