When starting a new project or refactoring an existing one, the question often arises:
How do you set up the project's directory structure?
My first advice is to keep the folder hierarchy as flat as possible for as long as possible:
/my/project/src├─ components│ ├─ BaseButton.vue│ ├─ BaseCard.vue│ ├─ BaseLink.vue│ ├─ ...│ ├─ ProductCart.vue│ ├─ ProductDetail.vue│ ├─ ...│ ├─ TheFooter.vue│ ├─ TheHeader.vue│ └─ ...├─ services│ ├─ product.js│ └─ ...├─ utils│ ├─ as-array.js│ ├─ format-price.js│ └─ ...└─ ...
When things in your app get more complicated, I recommend gradually increasing the complexity of the folder structure as needed.
If the utterly flat directory structure does not work for you anymore, start by adding only one additional base
directory:
/my/project/src├─ components│ ├─ base│ │ ├─ BaseButton.vue│ │ ├─ BaseCard.vue│ │ ├─ BaseLink.vue│ │ └─ ...│ ├─ ProductCart.vue│ ├─ ProductDetail.vue│ ├─ ...│ ├─ TheFooter.vue│ ├─ TheHeader.vue│ └─ ...├─ services│ ├─ product.js│ └─ ...├─ utils│ ├─ as-array.js│ ├─ format-price.js│ └─ ...└─ ...
The base directory contains all the generic and highly reusable components of your app.
Apart from keeping your component directory a little tidier, moving all base components into a separate directory solidifies their status as generic and reusable components.