This is a sample architecture for Vue.js projects based on features, one folder per feature.

• vuex - data store
• vue-router - routing
• vue-axios - backend calls
• axios-mock-adapter - mocking api calls

• feature - one folder per feature
• shared - will contain shared functionalities
  • components - shared components used by multiple features
  • services - shared services used by multiple features

• *.vue - files to hold the vue pages and components
• services.js - file to contain all the api calls and any logic functions needed by the feature
• store.js - file to contain the vuex store of the feature and only for that feature

• router - contains all the routes of the application
• store - contains the global store where the features stores are imported and global state
• mock-server(file) - contains mocks for the apis used in the application. The mocks are disabled automaticaly when environment != development

For api mocking, the following axios package was used: axios-mock-adapter

npm install

or

yarn

npm run serve

npm run build

See Configuration Reference.

Happy coding!,
@Imhotepp