Nuxt 3 ignore filepath for naming components?

Question

I'm migrating over to NuxtJS 3, but my project has several levels of component folders:

/components 
     /foo
          file.vue
          file2.vue
               /fooTwo
                    anotherfile.vue
     /bar
          file1.vue
          file10.vue
 etc...

Because of Nuxt's naming convention, if I try to import the anotherfile component I'd have to rename every place it's used inside my codebase to this: <FooFooTwoanotherfile/>

Because their documentation states:

the component's name will be based on its own path directory and filename

I really don't want to go through and rename every place that the component is being used. And I also would prefer to not flatten my directory structure either. So, is there some config option in Nuxt 3 that overrides this and lets me just globally call the components by their original name?

score 3 · Accepted Answer · answered May 19 '22 at 15:53

My answer here is still relevant for Nuxt3

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  components: [
    {
      path: '~/components', // will get any components nested in let's say /components/nested
      pathPrefix: false,
    },
  ]
})

And will allow you to auto-import components without the need to specify a nested path for the components.

/pages/index.vue

<template>
  <div>
    <yolo-swag /> <!-- no need for <nested-yolo-swag /> here -->
  </div>
</template>

With the following file structure

score 1 · Answer 2 · edited Sep 13 '22 at 12:23

1

As @kissu suggested this is the answer:

nuxt.config.ts

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

edited Sep 13 '22 at 12:23

kissu

40,416
14
65
133

answered May 19 '22 at 15:50

now_world

940
7
21
56

Nuxt 3 ignore filepath for naming components?

2 Answers2