Nuxt•5w ago

removing prefix of some components

I have shadcn-vue components in ./app/components/ui but I don't want to have to prefix them with Ui, IE UiButton. I tried adding the following to my nuxt.config.ts but it doesn't seem to make a difference:

    components: [
        '~/components/ui',
        '~/components',
    ],

    components: [
        '~/components/ui',
        '~/components',
    ],

5 Replies

kapa.ai•5w ago

Hi @bnason. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To remove the Ui prefix from components in your ./components/ui directory, your approach is almost correct, but you need to ensure that the pathPrefix option is set to false for that directory. By default, Nuxt uses the directory name as a prefix for auto-imported components. Setting pathPrefix: false will register the components using only their file names, so you can use <Button /> instead of <UiButton />. Here's how you should configure your nuxt.config.ts:

export default defineNuxtConfig({
  components: [
    {
      path: '~/components/ui',
      pathPrefix: false
    },
    '~/components'
  ]
})

export default defineNuxtConfig({
  components: [
    {
      path: '~/components/ui',
      pathPrefix: false
    },
    '~/components'
  ]
})

With this configuration, components in ./components/ui (like Button.vue) can be used as <Button /> instead of <UiButton /> in your templates. This is the recommended way to omit directory-based prefixes for specific component directories in Nuxt Docs: Directory-structure > App > components Docs: Custom Directories. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

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

bnasonOP•5w ago

@kapa.ai I'm still getting [Vue warn]: Failed to resolve component: Button

kapa.ai•5w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you are still getting [Vue warn]: Failed to resolve component: Button after updating your nuxt.config.ts, here are some things to check based on the official Nuxt documentation: 1. Component File Name and Location
Make sure your component file is named exactly Button.vue (case-sensitive) and is located directly inside components/ui/ (i.e., components/ui/Button.vue). If it's nested deeper (e.g., components/ui/buttons/Button.vue), the component name would be different unless you also set pathPrefix: false for subdirectories Docs: Directory-structure > App > components. 2. Configuration Format
Your nuxt.config.ts should look like this:

   export default defineNuxtConfig({
     components: [
       {
         path: '~/components/ui',
         pathPrefix: false
       },
       '~/components'
     ]
   })

   export default defineNuxtConfig({
     components: [
       {
         path: '~/components/ui',
         pathPrefix: false
       },
       '~/components'
     ]
   })

This ensures that components in components/ui are registered without the Ui prefix Docs: Directory-structure > App > components. 3. Restart the Dev Server
After changing the nuxt.config.ts, you must restart your development server for the changes to take effect. 4. Check for Name Conflicts
If you have another Button.vue elsewhere (e.g., in components/), there could be a naming conflict. The order in the components array matters—directories listed first take precedence Docs: Custom Directories. 5. Component Usage
Use <Button /> in your template. If you still get the error, try importing directly to debug:

   import { Button } from '#components'

   import { Button } from '#components'

If this import fails, Nuxt is not registering the component as expected Direct Imports. If you have checked all of the above and the issue persists, the knowledge sources do not provide further troubleshooting steps specific to this scenario. There may be an issue with the component itself or with how Nuxt is scanning your directories, but based on the documentation, the steps above should resolve the prefix issue and allow you to use <Button /> directly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

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

Gaming

Programming

removing prefix of some components

Did you find this page helpful?