Vue js project structure

Currently, I am building a school management app for my company using Vue js and Laravel. I was given a task to maintain the codebase of the application and give a certain structure to the application. I wanted to ask what pattern/structure should I follow to maintain the vue part?

Comments

[Stefan Dorresteijn]

That's a good question, and one of the things that make it difficult to develop large frontend projects. My suggestion would be to start a project with the Vue CLI and simply follow the project structure they give you. It looks a little like this.

[Asim Dahal]

Thank you very much

[Eric Hutchinson]

This isn't great advice on it's own.

throwing all your components in one folder, which it looks like you should do from this advice, is a bad idea. What happens when you have dozen's of views? Hundreds of components as you build up a real world app? Just throw them in those 3 folders?

[Stefan Dorresteijn]

I agree with you, sticking with this structure strictly will end up being messy, but it's good enough as a start. To explain how to properly structure a frontend application you'll need more than a comment, as it can get incredibly complicated.

[Larizza Tueros]

There is a great resource about this topic written by igeligel

igeligel/vuex-simple-structure
igeligel/vuex-namespaced-module-structure
igeligel/vuex-feature-scoped-structure

The second one + storybook is the one that I use. You can begin with the least complex and refactor when the need comes.

[Mahmood Abbas]

Well, the structure I use in my work is:

- src
  - assets
    - css/
    - images/
  - router
  - layout (only if I creating a dashboard with the same layout for all pages)
  - pages
    - Home/
    - About/
  - components
    - CustomFields/
    - CustomCards/
  - plugins/ 
  - store

I think this structure is easy to understand and help you to organize the files