Exploring the intricacies of nested directories with Nuxt 3 and Vite

Question

Exploring the intricacies of nested directories with Nuxt 3 and Vite

I'm looking to implement nested directory functionality in Nuxt 3 beta with Vite.

In Nuxt 2, I successfully used the following configuration in (nuxt.config.js):

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

My directory structure looks like this:

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

However, when I try to use <HeroSection/> in pages/index.vue, I encounter the following error:

[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

Is this feature no longer supported in Nuxt 3? Is there another way to configure it now? I couldn't find any relevant information in the documentation.

Thanks <3

javascript vue.js nuxt.js nuxt3.js

Answer 1

Answer №1

When utilizing nested directories, it is necessary to prefix the directory name to the component:

<template>
  <SectionsHeroSection />
</template>

This approach simplifies the component naming process:

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

Resulting in a cleaner way to reference components:

<template>
  <SectionsHero />
</template>

For further information, refer to the documentation:

Answer 2

When utilizing nested directories, it is necessary to prefix the directory name to the component:

<template>
  <SectionsHeroSection />
</template>

This approach simplifies the component naming process:

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

Resulting in a cleaner way to reference components:

<template>
  <SectionsHero />
</template>

For further information, refer to the documentation:

Answer 3

Answer №2

As I was going through the documentation, I stumbled upon this piece of code:

import { join } from 'pathe'
import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  hooks: {
    'components:dirs'(dirs) {
      // Include the ./components directory in the list
      dirs.push({
        path: join(__dirname, 'components'),
        prefix: 'awesome'
      })
    }
  }
})

However, it appears that it doesn't function properly with the following configuration:

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

Answer 4

As I was going through the documentation, I stumbled upon this piece of code:

import { join } from 'pathe'
import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  hooks: {
    'components:dirs'(dirs) {
      // Include the ./components directory in the list
      dirs.push({
        path: join(__dirname, 'components'),
        prefix: 'awesome'
      })
    }
  }
})

However, it appears that it doesn't function properly with the following configuration:

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

Exploring the intricacies of nested directories with Nuxt 3 and Vite

Answer №1

Answer №2

Similar questions

Issue: The element [undefined] is not recognized as a valid child of the <Routes> component. Only <Route> or <React.Fragment> components are allowed as children of the <Routes

Trigger AngularJS functionality upon the completion of loading a Partial routed by Express

Alignment issue with ThreeJS Collada file

JavaScript does not recognize the $ symbol

Discover the color value within an array that begins with the "#" symbol

Heroku deployment failed: Push rejected due to lack of a Cedar-supported application

Add a text description to the textarea when you upload an image

Aligning text vertically to the top with material UI and the TextField component

Incorporating external API information into Google Maps

dividing JavaScript files in the three.js game development platform

Can the conventional HTML context menu be swapped out for a link context menu instead?

Why isn't the page redirecting if the query is unable to locate the user?

Vue.js: When Props Become Undefined

Refresh the table following the removal of an item

The query entered by the user to search the reddit API

HTML5 video player with secondary playlist

Struggling to traverse through intricate layers of nested objects in React and showcasing them without going crazy

Creating synchronicity in your code within the useEffect hook

The automatic opening of a modal in a Livewire component is not functioning as expected

Tips for executing JavaScript code within a component