Search code examples
vue.jsnuxt.jsnuxtjs3nuxt3

How to remove only one level of component prefix in Nuxt app?

Directory structure:

components
components/sections/
components/sections/profile
components/sections/profile/Sidebar.vue
components/sections/main/InformationSlider.vue

Here is what default path prefix for these components would look like, without any configuration:

  1. <SectionsProfileSidebar />
  2. <SectionsMainInformationSlider />

And in my case, how can I omit just the Sections prefix? So that the components usage would look like this:

  1. <ProfileSidebar />
  2. <MainInformationSlider />
Solution

  • Based on this documentation you can do this:

    // nuxt.config.ts
export default defineNuxtConfig({
  components: [
    '~/components/sections',
    '~/components'
  ],
});

    And you should be able to use:

    <template>
  <MainInformationSlider />
</template>