Currently, we're using two different folder structures for this SPA for each sub-project, one for the Payroll project and another for the Employee project. Although the folder structure used in Payroll is outdated and probably won't be there anytime soon. Both structures share a lot of similarities with each other.
In the Payroll project, we're currently following this structure:
src/
-- assets/ -> All the assets (images, icons, etc) used in the SPA
-- components/ -> Visual components used in the SPA
--- Common/ -> Generic components
--- Employee/ -> Components used specifically in the Employee domain
--- Layout/ -> Components used for the SPA layout
--- Payroll/ -> Components used specifically in the Payroll domain
-- containers/ -> Components containing application and data logic for each domain of the SPA
--- Employee/ -> Containers used in the Employee domain, separated by route
--- Layout/ -> Containers used for the SPA layout
--- Payroll/ -> Containers used in the Payroll domain, separated by route
-- content/ -> Contains static files/data (usually .json files) that are used by other components/containers in the App
-- graphql/ -> Contains GraphQL mutations, fragments and queries used in the App, separated by domain
-- mixins/ -> Contains Vue mixins (reusable component logic) that are used by components/containers in the App
-- modules/ -> Contains generic helper modules that are used in multiple regions of the app
-- router/ -> Contains the router setup for the App
-- store/ -> Contains store setup for the App, each store is divided in sub-modules
-- styles/ -> Global SCSS styles used in the App, mostly imports from other libs
-- views/ -> Currently, this folder only contains our Logged.vue component, which is basically the root component for the App
* App.vue
* main.js
* plugins.js
* registerServiceWorker.js
* router.js
* socket.js
* store.js
src/
- Common/
--- assets/
--- components/
--- containers/
--- content/
--- graphql/
--- mixins/
--- modules/
--- routes/
--- services/
--- store/
--- styles/
--- views/
- Employee/
--- assets/
--- components/
--- containers/
--- content/
--- graphql/
--- mixins/
--- modules/
--- routes/
--- services/
--- store/
- Payroll/
--- assets/
--- components/
--- containers/
--- content/
--- graphql/
--- mixins/
--- modules/
--- routes/
--- services/
--- store/
* App.vue
* main.js
* plugins.js
* registerServiceWorker.js
* router.js
* socket.js
* store.js