Project Structure in Vue 3
A well-organized project structure improves maintainability, scalability, and collaboration. Follow these conventions for Vue 3 projects:
Recommended Structure
my-vue-app/
├── public/ # Static assets (favicon, index.html)
├── src/
│ ├── assets/ # Images, fonts, etc.
│ ├── components/ # Reusable UI components
│ ├── composables/ # Reusable logic (e.g., useAuth, useFetch)
│ ├── features/ # Feature modules (optional for large apps)
│ ├── router/ # Vue Router configuration
│ ├── store/ # Pinia/Vuex stores
│ ├── views/ # Page-level components
│ ├── locales/ # i18n translation files
│ └── App.vue # Root component
├── .env # Environment variables
├── package.json # Project metadata and scripts
├── vite.config.js # Vite configuration
└── README.md # Project documentationNaming Conventions
- Use PascalCase for component files (e.g.,
UserProfile.vue). - Use kebab-case for folders and assets (e.g.,
user-profile/,logo.svg). - Prefix composables with
use(e.g.,useAuth.ts).
Modular Structure
- For large projects, organize by feature/domain (e.g.,
features/auth/,features/dashboard/). - Keep shared components and composables in their respective folders.