STAND WITH UKRAINE πŸ‡ΊπŸ‡¦

My Vue 3 Directory Structure

Created:


Folowing directory structure is good for me, but I only do small, personal projects

assets
└─ css
   β”œβ”€ app.css
   β”œβ”€ reset.css
   └─ variables.css

api
β”œβ”€ api.js
└─ fetchWrapper.js

auth
└─ auth.js

components
└─ app
   β”œβ”€ AppHeader.vue
   β”œβ”€ AppFooter.vue
   └─ AppLoginModal.vue
└─ common
   β”œβ”€ Alert.vue
   β”œβ”€ Btn.vue
   β”œβ”€ Dialog.vue
   └─ Loader.vue
└─ layouts
   └─ BaseLayout.vue

composition
└─ fetchSomething.js

data
└─ constants.js

router
└─ router.js

typings
β”œβ”€ ts-shim.d.ts
└─ types.d.ts

utils
└─ sleep.js

views
β”œβ”€ About.vue
└─ Index.vue

App.vue

main.js

~/api/api.js - all back-end API in one place.

~/api/fetchWrapper.js - more info here

~/components - project components

~/components/app - components present/available on every view

~/components/common - generic components / sort of own library

~/views - router views | pages

~/data - data reused in different places

// ~/data/constants.js

export const ROUTES = {
	about: '/about',
	dashboard: '/dashboard',
	index: '/',
	user: '/user',
};

export const DEFAULT_ERROR = 'Something went wrong πŸ‘Ώ';

So we get single source of truth, autocompletion and maybe error check

~/router/router.js and not ~/router/index.js - in vscode, if I open a few files and 2+ of them are named the same (index.js), I can’t tell right away which is witch. Plus it’s easier to open a file without leaving the keyboard, just press Ctrl+p and type file name, router, and router.js will be first in the list.