Define directory structure for component files #2368
Replies: 4 comments
-
|
Per offline conversations with @y4izus, I expressed my concerns about editing component files called Currently, we have only de pages following that pattern because of nuxt architecture. Sometimes when I have to edit multiple pages simultaneously, I don't know what page I am editing. If we extend that pattern, I think it will result in a "visual studio opened files tab bar" full of tabs called |
Beta Was this translation helpful? Give feedback.
-
I see your point, @korgan00. And I agree that we should strive to improve DX and having lots of As an alternative, I would propose to name all files by the name of the component, like this: What do you think? |
Beta Was this translation helpful? Give feedback.
-
|
This is a usual suspect in front-end development. Take a look at this reddit discussion. My purist personality is pro adding an |
Beta Was this translation helpful? Give feedback.
-
|
Yeah! The plugin that @delapuente suggests I think is so interesting. @eddybrando, your name proposal looks good for me and for the plugin. |
Beta Was this translation helpful? Give feedback.
-
Current situation
As our project grows, the number of files dedicated to a single component grows as well.
Before, a single file would take care of everything related to a component. These files would then be located in the
componentsdirectory, like this:With the integration of Storybook (#884) and more unit and snapshot tests, we will be requiring more files related to a single component. If we were to keep our current logic, it would result in a directory structure like this:
This structure (or lack there off) leads to a not so well organised project. There is potential to group files thematically.
Proposal
As initially raised by @techtolentino in #1143 (comment), proposed by me in #1143 (comment) and refined by @y4izus in #1143 (comment), I'd like to suggest a new strategy for the directory structure of component files.
All files related to a component will be located in a folder with the name of the component. The main Vue component file will be named
index.vuein order to allow for easier import by other Vue components (e.g.import Card from '~/components/Card'). All other files will be namedindex.*.This will result in a structure similar to this:
Dealing with component variants
There may be scenarios in which a component may need a variant that requires a completely new file (e.g. complex variations in Markup that don't allow much reusability of template code).
In this case I would propose to maintain the same logic but nest the variant component folder in the component folder.
In this example, the Link component has a variant component:
This will then group variants in the directory structure, as well as result in logical imports by other Vue components, like this:
Dealing with logically nested components
Some components may have children components that are exclusive to them (e.g.
CardandCardHeader).I'd like to propose for this scenario, that we use the same logic and nest the child component folder inside the component folder, like this:
Other considerations
With the introduction of global component registration in #820, we may need to look into the naming of component files, since these are automagically registered with names based on their paths and file names.As pointed out offline by @korgan00, the global component registration introduced in #820 registers the components based on their names and not their filename or path.
This allows for a structure like this
as long as the component files name their components like
export default class CardHeader extends Vue {}andexport default class ModalHeader extends Vue {}, making them available as<CardHeader />and<ModalHeader />.Scope / Out of scope
This discussion is not about the naming conventions of the component files themselves (e.g.
Foo.vuevsAppFoo.vuevsTheFoo.vue), nor is it about the grouping of components in folders likeui,overview,logicormetal. I believe these should be separate discussions.This issue should solely focus on grouping files related to one single component.
Beta Was this translation helpful? Give feedback.
All reactions