Project Structure

This guide shows the Vue 3 boilerplate folder structure and naming conventions.

Structure Tree

vue3-boilerplate/
├── public/                          # Static assets served as-is
│   └── favicon.ico
├── src/
│   ├── assets/                      # Processed assets (SCSS, images)
│   │   ├── scss/
│   │   │   ├── _index.scss          # SCSS index file
│   │   │   ├── _variables.scss       # SCSS variables (colors, spacing, breakpoints)
│   │   │   ├── _mixins.scss         # Reusable SCSS mixins
│   │   │   ├── typology.scss        # Font sizes, base HTML font scaling
│   │   │   ├── global.scss          # Main stylesheet (imports all partials)
│   │   │   ├── mandatoryimports.scss # Mandatory SCSS imports
│   │   │   ├── mediaQuery.scss      # Media query utilities
│   │   │   └── dynamicVariables.css # Dynamic CSS variables
│   │   ├── images/                  # Image assets
│   │   ├── locales/                 # Locale files
│   │   │   └── en.json              # English translations
│   │   ├── getAssets.js             # Image loader utility for dynamic imports
│   │   ├── main.scss                # Main SCSS entry point
│   │   └── loader.gif               # Loader image
│   ├── components/                  # Reusable Vue components
│   │   └── sharedComponents/        # Cross-project reusable components
│   │       ├── BasicPopup.vue       # Basic popup component
│   │       ├── CircularProgressBar.vue # Circular progress bar component
│   │       └── ScrollObserver.vue   # Scroll observer component
│   ├── composables/                 # Composition API utilities
│   │   ├── remIndicatorComposable.js # REM indicator composable
│   │   ├── useCommonUtilities.js    # Common utilities composable
│   │   ├── useRemToPixel.js         # REM to pixel converter
│   │   └── useVueCommonUtilities.js # Vue common utilities
│   ├── helpers/                     # Helper utility functions
│   ├── dummy/                       # Dummy/mock data
│   ├── network/                     # API layer
│   │   ├── base/                    # Base API configuration
│   │   │   ├── appAxios.js          # Axios instance with base URL & interceptors
│   │   │   ├── api.js               # HTTP method wrappers (GET, POST, PUT, DELETE)
│   │   │   └── apiRoutes.js         # API endpoint URL definitions
│   │   └── project.service.js       # API call functions used by stores
│   ├── router/                      # Vue Router configuration
│   │   └── index.js                 # Route definitions and navigation guards
│   ├── stores/                      # Pinia state management
│   │   ├── common.store.js          # Common state store
│   │   └── user.store.js            # User state store
│   ├── views/                       # Page-level components (route targets)
│   │   ├── HomeWrapper.vue          # Home page wrapper
│   │   └── LoginWrapper.vue         # Login page wrapper
│   ├── main.js                      # Application entry point
│   ├── App.vue                      # Root App component
│   ├── Auth.vue                     # Authentication component
│   ├── Constants.js                 # Global constants (attached to window)
│   ├── i18n.js                      # i18n instance configuration
│   └── Provider.vue                 # App entry component (auth check, providers)
├── .env                             # Environment variables (VITE_API_BASE_URL)
├── .eslintrc.cjs                    # ESLint configuration
├── .gitignore                       # Git ignore rules
├── .prettierrc.json                 # Prettier configuration
├── index.html                       # Entry HTML file
├── jsConfig.json                    # JavaScript/path alias configuration
├── package.json                     # Dependencies and npm scripts
├── README.md                        # Project documentation
└── vite.config.js                   # Vite build configuration

Naming Conventions

Folders

All folders use camelCase naming convention.

Folder	Example
assets/	scss/, images/, locales/
components/	sharedComponents/
composables/	composables/
helpers/	helpers/
dummy/	dummy/
network/	base/
router/	router/
stores/	stores/
views/	views/

Files

File Type	Naming Convention	Example	Notes
Vue Components	CapitalCase.vue	App.vue, Auth.vue, HomeWrapper.vue	Always CapitalCase
Shared Components	CapitalCase.vue	BasicPopup.vue, CircularProgressBar.vue	In sharedComponents/ folder
Composables	useName.js or nameComposable.js	useCommonUtilities.js, remIndicatorComposable.js	Prefer use prefix, exceptions allowed
Stores	name.store.js	common.store.js, user.store.js	Always .store.js suffix
Services	name.service.js	project.service.js	Always .service.js suffix
API Base Files	camelCase.js	appAxios.js, api.js, apiRoutes.js	In network/base/ folder
SCSS Partials	_name.scss	_variables.scss, _mixins.scss, _index.scss	Underscore prefix for partials
SCSS Files	camelCase.scss	typology.scss, global.scss, main.scss	No underscore for main files
CSS Files	camelCase.css	dynamicVariables.css	For dynamic/generated CSS
Constants	Constants.js	Constants.js	Singular, CapitalCase
Configuration	name.config.js or name.js	vite.config.js, i18n.js, main.js	Use .config.js when appropriate
Locale Files	lang.json	en.json	ISO language codes
Router	index.js	index.js	Standard router file name
Entry Points	main.js, App.vue, Provider.vue	main.js, App.vue	Standard entry point names
Helper Utilities	camelCase.js	getAssets.js	Descriptive camelCase names
Images	camelCase.ext	loader.gif	Descriptive names with extension