Nuxt•3mo ago

ShadCN vue ovveriding skeleton component

I am using nuxt with shadcn vue and each component normally loads in with an index.ts file. How can i prevent this warning from showing up? WARN Two component files resolving to the same name Sonner: nuxt 6:40:30 PM - /Users/rjawaji/Developer/cityguide/cityguide-admin/app/components/ui/sonner/index.ts - /Users/rjawaji/Developer/cityguide/cityguide-admin/app/components/ui/sonner/Sonner.vue WARN Two component files resolving to the same name Textarea: nuxt 6:40:30 PM - /Users/rjawaji/Developer/cityguide/cityguide-admin/app/components/ui/textarea/index.ts - /Users/rjawaji/Developer/cityguide/cityguide-admin/app/components/ui/textarea/Textarea.vue WARN Two component files resolving to the same name Tooltip: nuxt 6:40:30 PM - /Users/rjawaji/Developer/cityguide/cityguide-admin/app/components/ui/tooltip/index.ts - /Users/rjawaji/Developer/cityguide/cityguide-admin/app/components/ui/tooltip/Tooltip.vue WARN Overriding Breadcrumb component. You can specify a priority option when calling addComponent to avoid this warning.

4 Replies

kapa.ai•3mo ago

Hi @Red. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- These warnings happen because Nuxt auto-imports components from your components directory, and it finds two files that resolve to the same component name (e.g., Sonner from both index.ts and Sonner.vue). You have a few options: - Remove or rename one of the duplicates so only one resolves to that name. For example, avoid exporting a component with the same name from index.ts if Sonner.vue exists, or move index.ts outside the auto-scanned components dirs. Nuxt auto-imports everything under ~/components by default. [components dir] - Restrict what counts as a component via the components configuration. For example, only register .vue files to ignore index.ts files: [Component Extensions]

// nuxt.config.ts
export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      extensions: ['.vue'],
    }
  ]
})

// nuxt.config.ts
export default defineNuxtConfig({
  components: [
    {
      path: '~/components',
      extensions: ['.vue'],
    }
  ]
})

- If components come from a module using addComponent and you’re intentionally overriding, set a higher priority to the one you want to win to avoid the “Overriding … component” warning. [addComponent]

// inside a module/setup
addComponent({
  name: 'Breadcrumb',
  filePath: resolver.resolve('./runtime/components/Breadcrumb.vue'),
  priority: 10
})

// inside a module/setup
addComponent({
  name: 'Breadcrumb',
  filePath: resolver.resolve('./runtime/components/Breadcrumb.vue'),
  priority: 10
})

- If you prefer direct imports instead of auto-import, disable component auto-importing and import from #components manually, but note module-added components won’t be affected. [Auto-imported Components; Direct Imports]

// nuxt.config.ts
export default defineNuxtConfig({
  components: { dirs: [] }
})

// nuxt.config.ts
export default defineNuxtConfig({
  components: { dirs: [] }
})

Pick the approach that matches your setup; for shadcn-vue with index.ts files, the simplest is limiting extensions to .vue so TypeScript index files don’t collide. [Component Extensions] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1070955241555628073> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

RedOP•3mo ago

I did this components: [ { path: "~/components", extensions: ['.vue'] } ] However i still get the error @kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: Sorry @Red, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Gaming

Programming

ShadCN vue ovveriding skeleton component

Did you find this page helpful?