Best practice ordering vue.js files

Question

I want to know what is the best way to order the folders and other components in a vue.js project so that it can be easily maintained and scalable

Answer 1

Like the comments already say there are a lot of ways and opinions of how to structure your vue project.

Like tony19 already said it's a good start to use the vue-cli to generate a project.

If you want to see a real world example of a project you could try this one: https://github.com/gothinkster/vue-realworld-example-app

gothinkster actually has an example of the same project in a lot of different frontends and backends. just look at their repos.

If you plan to use vuetify as your ui library i can also recommand to have a look at their free templates https://vuetifyjs.com/en/themes/premium/

There are plenty others of course. You might want to search for "vue real world example" or something similar on google.

For scaleability i would say to split things into smaller files and components is a good practice.

For example when creating a vuex module you could have a file for the complete vuex storage or a file for each module or even split each modules into an actions.js, mutations.js getters.js state.js and an index.js which combines those 4.

Please keep in mind that all of the above is my opinion and others might think differently.

Answer 2

I'd advice you to go for the standard cli-structure - but remember that you can still add sub-folders everywhere and don't get caught putting in 200 files under modules or something like that.

If you're about to make a module - add a folder.

If you're about to add a component - add a folder and so on.

This also counts for the store, which can get pretty big at times.

If you want to split your store because you know it will be too big, add sub-folders for actions, mutations and so on seperately and then add in the files like 'actions/actions_user.vue' '..actions_items.vue' and so on - or leave out the 'actions_' if you're more comfortable with that (they are in the actions folder now anyway, but it could make it harder to search for them if you're not using the file-tree).

For how to split up actions (and the other content of the store) into multiple files, please look up my answer here

there are also the options to add modules in the store or even adding multiple stores, which contributes to scaleability, but - in my opinion - can get finicky and harder to read than it being useful in the end.