Create folders named for the feature they represent. When a folder grows to contain more than 7 files, start to consider creating a folder for them. Your threshold may be different, so adjust as needed.
├─ src
├── assets
├── components
│ └─ ResusableComponentA
│ ├─ index.js
│ ├─ ReusableComponentA.vue
│ └─ ReusableComponentA.spec.js
├── lang
│ └─ index.js
├── mixins
│ ├─ resusableMixinA.js
│ └─ resusableMixinA.spec.js
├── modules
│ ├─ resusableModuleA.js
│ └─ resusableModuleA.spec.js
├── routes
│ └─ index.js
├── store
│ ├─ index.js
│ └─ modules
│ └─ exampleStoreModule
│ ├─ index.js
│ ├─ getters.js
│ ├─ getters.spec.js
│ ├─ mutations.js
│ ├─ mutations.spec.js
│ ├─ actions.js
│ ├─ actions.spec.js
│ ├─ mocks
│ │ └─ index.js
│ └─ api
│ └─ index.js
├── utils
│ ├─ index.js
│ └─ utility-a.js
├── views
│ └─ namespaceA
│ ├─ index.js
│ └─ namespaceSectionA
│ ├─ index.js
│ ├─ namespaceSectionA.vue
│ └─ namespaceSectionA.spec.js
├── main.js
├── App.vue
Assets Directory
The assets
directory contains un-compiled assets such as Less, Sass or JavaScript.
Components Directory
The components
directory contains all reusable Vue.js Components.
Lang Directory
The lang
directory contains application i18n translations and language settings.
Mixins Directory
The mixins
directory contains reusable mixins for reusable components and view components.
Router Directory
The router
directory contains application routes.
Store Directory
The store
directory contains all Vuex Store files and modules.
Utils Directory
The utils
directory contains application-wide utilities
Views Directory
The views
directory contains application views and routes.
Originally published at https://gist.github.com/chrisdiana/ca196272035f5e6df63512907c3fadf5
#vue #web-development #vuejs