Using index.vue in component folders
I wonder if it's possible to have
index.vue components in a subfolder of the components folder be recognized as a component with the folder's name? Let's say I have the following structure:
The generated auto-import for the form.vue component will be <FormForm>. I could place the form.vue component outside of the form folder, but it would defeat the point of organizing them. What I'm looking to have is to change the name of form.vue to index.vue and have that component be recognised as <Form> when auto-importing.
I've looked into the nuxt config's components property, but I don't see the option to rewrite the name dynamically.4 Replies
Hi @Ragura. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources do not explicitly mention support for using an index.vue file in a subfolder of the components directory to have it auto-imported as the folder name (e.g., components/form/index.vue being auto-imported as <Form>).
By default, Nuxt generates component names based on the full path, so components/form/form.vue becomes <FormForm>, and components/form/index.vue would become <FormIndex> or similar, not just <Form>.
There is no documented option in the components property of nuxt.config to rewrite or alias component names dynamically in this way. The closest available configuration is using the pathPrefix option to remove path-based prefixes entirely, but this would affect all components in the directory, not just index.vue files, and would not provide the specific folder-name-as-component-name behavior you described Custom Directories.
If you need a component to be auto-imported as <Form>, you would need to name it form.vue and place it directly in the components directory, or manually import and re-export it as needed. There is no built-in Nuxt feature for the index.vue pattern you described according to the current documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@290141491236569098> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Hey. I have an issue open. It is on the project board!
Feel free to upvoted if you think it is a good idea think it will give the team a better idea of if this is a wanted addition💚
@johntanzer Thanks for the info! I didn't know there was an issue already, and I fully support what you said. Posted my thoughts there too, so fingers crossed!
In the meanwhile, your issue actually taught me something about Nuxt with the
parent.vue usage as a workaround.