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

  • 0
    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!