How can I structure files in a project (vue) more accurately?

Question

Vue.js

There is the following structure:


There is a SolutionsSection component and related to it: SolutionsSectionItem and SolutionsSectionRow. I would like to put it in a separate folder with the same (SolutionsSection) name, but then this folder jumps up the structure and the former alphabetical sequence is lost:


There is an option to create folders for all components and then the structure will be preserved, but this is hardly a convenient option , because Not all components have "subcomponents". Changing sorting in the editor is also not a suitable option, because. the project is large and not in all sections it is necessary to sort folders and files on the same level.
Does anyone have any working examples?

Answer 1

it all depends on your wishes and ideas about beauty.
I have all the components stored in components/ComponentName , inside which is already specifically ComponentName.vue/html/css (the last two are necessary and the size of the component).