How do I structure components correctly in a Vue project?
In the Vue documentation, with regard to the word order in the components, recommendations are put forward to go starting from the more general.
That is, I have, for example, a User page, which has several sections, About, Content, Posts.
And in the end, the components come out like this:
User -- UserSectionAbout.vue -- UserSectionContent.vue -- UserSectionPosts.vue
And there is one BUT. This is a situation in which it becomes necessary to create a common component for all these sections, let's say that they should have some kind of their own header. And actually, according to the logic of things, it should be called SectionHeader, because this is a header that belongs to a section, but in the end it gets confused in the structure.
User -- UserSectionAbout.vue -- UserSectionContent.vue -- UserSectionHeader.vue -- UserSectionPosts.vue
And already at first glance it becomes not very clear where the components of individual sections are, and where are the subcomponents for the section, because it will not be clear right off the bat that SectionHeader is not a section called "Header", but a header for a section.
And the names of the components themselves are respectively reflected from the file system.
According to your logic, it should be like this:
Alternatively, you can organize everything into folders:
I would split like this:
To place the code, please use CodePen or similar tool. Thanks you!