structure.txt

.
├─ src
│  ├─ assets/
│  │  ├─ fonts/
│  │  ├─ styles/
│  │  │  ├─ partials/
│  │  │  │  ├─ _common.scss         # Common styling, e.g anchors.
│  │  │  │  ├─ (_tables.scss)       # Element stylings that get too lengthy
│  │  │  │  ├─ _layout.scss         # CSS not suitable in layout/components scoped css
│  │  │  │  ├─ _helpers.scss        # If not using bootstrap 4 helpers
│  │  │  │  ├─ _reset.scss          # Reset, Normalize, whatever
│  │  │  │  ├─ _typography.scss     # Typography specific
│  │  │  │  └─ _variables.scss      # Strictly variables
│  │  │  └─ main.scss
│  │  └─ svg/
|  ├─ components/
│  │  ├─ layout/                    # (The)Header, (The)Sidebar etc.
│  │  ├─ major/                     # Components that consist of 'minor' components
│  │  │  ├─ charts/
│  │  │  │  ├─ ChartBar.vue
│  │  │  │  ├─ ChartPie.vue
│  │  │  └─ ColorPicker.vue
│  │  │  minor/                     # Lowest level components
│  │  │  ├─ Avatar.vue
│  │  │  ├─ MessageBox.vue
│  │  │  └─ Rating.vue
│  ├─ utils/
│  │  ├─ api/
│  │  │  ├─ calls/
│  │  │  │  ├─ user.js
│  │  │  │  ├─ something.js
│  │  │  │  └─ else.js
│  │  │  └─ index.js                # Axios instances and interceptors
│  │  ├─ directives/
│  │  ├─ helpers/                   # Common functions and plugin configurations
│  │  │  ├─ filters.js              # Text transformations, moment functions, etc
│  │  │  ├─ colors.js               # Color combinations for charts.
│  │  │  └─ datepickers.js          # Datepicker options
│  │  ├─ i18n/
│  │  ├─ store/
│  │  │  ├─ modules/                # Always use modules, keep them seperate from views
│  │  │  │  ├─ user/                # Either keep a single index.js or if getting lengthy
│  │  │  │  └─ dropdowns/           # break into _actions.js, _mutations.js, etc
│  │  │  └─ index.js
│  │  ├─ router/
│  │  |  └─ index.js                # Totally dependable on the length of the project.
│  ├─ views/
│  │  ├─ landing/
│  │  │  └─ Landing.vue
│  |  ├─ interface/
│  │  │  ├─ view1/
│  │  │  │  ├─ subview/
│  │  │  │  ├─ _routes.js            # path & child views paths, imported in app/routes.js
│  │  │  │  ├─ View1.vue
│  │  │  ├─ view2/
│  │  │  ├─ view3/
│  │  │  └─ (interface)_routes.js   # imported in utils/router
│  ├─ AppWrapper.vue                # Main app component
│  └─ main.js                       # App entry file
├─ public/                          # static assets (no webpack)
│  └─ ...
├─ ...
├─ ...
└─ ...