Nuxt•7d ago

nuxt cannot infer nested component naming convention

If i have a component at components/app/app-button/app-button.vue, the auto import expects a component called AppAppButton, but if i remove the app-button folder and just have the component at components/app/app-button.vue then nuxt is smart enough to accept an AppButton import. I feel like this is a bug. I much prefer colocating styles, stories, tests, etc. with each of my components, hence the folder for each component. surely theres a way to tell nuxt not to append the root name of the path if it already exists on the component name or something or at least protections against arbitrarily removing identical prefixes on the next part of a prefix if it already exists?

2 Replies

kapa.ai•7d ago

Hi @BinaryArtifex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This is indeed a known behavior in Nuxt's component auto-import feature. Let me explain the situation and provide some possible solutions based on the information from the knowledge sources. The behavior you're experiencing is related to how Nuxt generates component names based on their file path. By default, Nuxt uses the directory structure to create the component name, which can lead to the situation you described. There are a few ways to address this: 1. Custom component naming: You can customize how Nuxt generates component names by configuring the components option in your nuxt.config.ts file. Here's an example of how you might do this:

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

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

This configuration tells Nuxt to use only the component's filename for naming, ignoring the path prefix Docs > Guide > Directory-structure > components (https://nuxt.com/docs/guide/directory-structure/components#component-names). 2. Normalized component names: Nuxt 4 introduces a feature called "normalized component names" which aims to make the component names consistent between Vue and Nuxt. You can enable this feature in your nuxt.config.ts:

   export default defineNuxtConfig({
     experimental: {
       normalizeComponentNames: true
     }
   })

   export default defineNuxtConfig({
     experimental: {
       normalizeComponentNames: true
     }
   })

This should help align the component naming between Vue and Nuxt Docs > Getting-started > Upgrade (https://nuxt.com/docs/getting-started/upgrade#normalized-component-names). 3. Custom directories: If you want more fine-grained control, you can specify custom directories for your components and how they should be named. For example:

   export default defineNuxtConfig({
     components: [
       { path: '~/components/app', prefix: 'App' },
       '~/components'
     ]
   })

   export default defineNuxtConfig({
     components: [
       { path: '~/components/app', prefix: 'App' },
       '~/components'
     ]
   })

This configuration would allow you to use <AppButton /> for a component located at components/app/app-button/app-button.vue Docs > Guide > Directory-structure > components (https://nuxt.com/docs/guide/directory-structure/components#custom-directories). These solutions should help you maintain your preferred directory structure while avoiding the naming issues you've encountered. If none of these solutions fully address your needs, you might want to consider reporting this as a potential improvement to the Nuxt team through their GitHub repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7d ago

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

Gaming

Programming

nuxt cannot infer nested component naming convention