How to structure an Enterprise Scale Vue.js 3 Project

First published Wed Jan 18, 2023

I believe we should stop grouping files into directories like “components”, “stores”, and “pages” in VueJS projects. We should keep using flat directory structures, but instead group by subsystems.

Let’s look at the classic example - a to-do app! This will be a little more complex than most to try and show the benefits of this project structure.

In this app, there will be many-to-many relationships between users, projects, and to-dos (each to-do can be in multiple projects, and each project can have multiple users). I would foresee something like the following directory structure being used:

├── src
│   ├── auth
│   │   ├── useCurrentUser.ts
│   │   ├── useAuthGuard.ts
│   │   └── etc...
│   ├── projects
│   │   ├── ProjectsListPage.vue
│   │   ├── ProjectPage.vue
│   │   ├── useProjectStore.ts
│   │   └── etc...
│   ├── todos
│   │   ├── TodoModal.vue
│   │   ├── TodoRow.vue
│   │   ├── useTodoStore.ts
│   │   └── etc...
│   └── App.vue

I feel this structure scales better for large projects, however, it’s not without issues:

  • There’s a greater chance that different developers would choose to put a file in different submodules, which can lead to disorganisation
  • For some projects, defining submodules could be tricky - they may end up so interdependent that the interface between them is very complex

I think this would be a great choice for many projects, as it helps to solidify and group concepts. You could even put documentation inside the submodule directories!

I’d love to hear your opinion and thoughts on where it may or may not be suitable. Please leave a comment in my public inbox, linked below!