How to correctly structure components in a Vue project?

Question

JavaScript

In the Vue documentation, with regards to word order in components, recommendations are made to go from the more general.
That is, I have, for example, a User page, on which there are 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 belonging to the section, but as a result, confusion in the structure turns out.

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 the section.

How can all this be restructured so as not to stray too far from the "wow" recommendations, and the visual perception has become more obvious?

Answer 1

components/
    User/
        Header.vue
        Section/
            About.vue
            Content.vue
            Posts.vue

And the names of the components themselves are respectively reflected from the file system

name: "UserHeader",
name: "UserSectionAbout",
name: "UserSectionContent",
name: "UserSectionPosts",

Answer 2

According to your logic, it should be like this:
-- UserHeader.vue
-- UserSectionAbout.vue
-- UserSectionContent.vue
-- UserSectionPosts.vue
Alternatively, you can sort everything into folders:

/User
  Header.vue
  /Sections
    Section1.vue
    Section2.vue

Answer 3

I would split like this:

/Components/
/Components/Users/
/Components/Users/About.vue
/Components/Users/Content.vue
/Components/Users/Header.vue
/Components/Users/Posts.vue