Directory Structure

10.3.1. Standard Folder Structure

src/
├── api/              # API call functions
│   ├── client.ts     # Axios instance configuration
│   └── user.ts       # User-related APIs
├── assets/           # Static assets (images, fonts)
├── components/       # Shared components
│   ├── common/       # General-purpose UI components (Button, Modal, etc.)
│   └── layout/       # Layout components (Header, Sidebar, etc.)
├── composables/      # Composable functions
├── locales/          # i18n translation files
├── plugins/          # Vue plugin configuration
├── router/           # Vue Router configuration
│   └── index.ts
├── stores/           # Pinia stores
├── styles/           # Global styles and Tailwind configuration
├── types/            # TypeScript type definitions
├── utils/            # Utility functions
├── views/            # Page components
│   ├── user/
│   │   ├── UserListView.vue
│   │   └── UserDetailView.vue
│   └── auth/
│       └── LoginView.vue
├── App.vue
└── main.ts

---

10.3.2. Directory Principles

• views/: Place page components that are directly connected to routes. Use the View suffix.
• components/: Place shared components that are reused across multiple pages.
• Page-specific components may be placed under the corresponding views/ subdirectory.
• api/: Separate files by domain.
• types/: Define API response types and shared types. Component-specific types may be defined within the component file itself.
• composables/: Encapsulate reusable logic. Each file must define exactly one composable.

---

10.3.3. Component Classification Criteria

Classification	Location	Criteria
Page components	views/	Directly connected to routes, *View.vue suffix
Shared UI components	components/common/	Reused across 2 or more pages
Layout components	components/layout/	Page layout structural elements
Page-specific components	views/{domain}/	Used only within a specific page

---

10.3.4. File Placement Rules

• When a directory contains 10 or more files, subdivide into child directories.
• index.ts files serve as directory entry points and must be used exclusively for re-exports.
• Test files must be placed in the same directory as the source file with a *.spec.ts or *.test.ts extension. A separate __tests__/ directory is also permitted.