How do I structure components correctly in a Vue project?

0
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.

How can you restructure all of this, so that you do not really move away from the "loud" recommendations, and the visual perception becomes more obvious?
JavaScript Leah Sanders, Jul 10, 2019

3 Answers

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",

Anonymous

0
According to your logic, it should be like this:

- UserHeader.vue

- UserSectionAbout.vue

- UserSectionContent.vue

- UserSectionPosts.vue

Alternatively, you can organize everything into folders:
```
/User

  Header.vue

  /Sections

    Section1.vue

    Section2.vue
```
Anonymous

I would split like this:

/Components/

/Components/Users/

/Components/Users/About.vue

/Components/Users/Content.vue

/Components/Users/Header.vue

/Components/Users/Posts.vue

Anonymous

Your Answer

To place the code, please use CodePen or similar tool. Thanks you!