|
27 | 27 | - **Auto-imports**: Automatic imports for Vue composables and PrimeVue components |
28 | 28 | - **TypeScript**: Strict type checking across the stack |
29 | 29 |
|
| 30 | +## Auto-Import Configuration (Frontend) |
| 31 | + |
| 32 | +The frontend uses `unplugin-auto-import` and `unplugin-vue-components` for automatic imports: |
| 33 | + |
| 34 | +### Auto-Import Rules |
| 35 | +- **Framework APIs**: All Vue, Vue Router, and Pinia APIs are automatically imported |
| 36 | +- **Third-party Libraries**: VueUse composables and PrimeVue utilities are auto-imported |
| 37 | +- **Custom Code**: All files in `src/**` (all subdirectories under src) are auto-imported |
| 38 | +- **Components**: All PrimeVue components and custom components in `src/*` (direct subdirectories) are auto-imported |
| 39 | + |
| 40 | +### Usage Guidelines |
| 41 | +- No need to import Vue APIs, VueUse composables, or PrimeVue components |
| 42 | +- All exported functions from any file under `src/` are automatically available |
| 43 | +- Components from direct subdirectories of `src/` are automatically available |
| 44 | +- Type definitions are generated in `auto-imports.d.ts` and `components.d.ts` |
| 45 | +- ESLint configuration is automatically updated for auto-imports |
| 46 | +- Avoid manual imports for auto-imported items to prevent conflicts |
| 47 | + |
| 48 | +## Path Aliasing |
| 49 | + |
| 50 | +The project uses TypeScript path mapping for clean imports across the monorepo. |
| 51 | + |
| 52 | +### Configuration |
| 53 | +- **Base Config**: `tsconfig.base.json` defines all path mappings |
| 54 | +- **Frontend**: Uses `vite-tsconfig-paths` plugin for Vite compatibility |
| 55 | +- **Backend**: Inherits paths from base configuration |
| 56 | +- **Root Level**: Paths resolve from project root directory |
| 57 | + |
| 58 | +### Path Mapping Rules |
| 59 | +- `@backend` → `./backend/src` |
| 60 | +- `@backend/*` → `./backend/src/*` |
| 61 | +- `@backend/tests/*` → `./backend/tests/*` |
| 62 | +- `@frontend` → `./frontend/src` |
| 63 | +- `@frontend/*` → `./frontend/src/*` |
| 64 | + |
| 65 | +### Best Practices |
| 66 | +- Always use path aliases `@frontend/` and `@backend/` but not relative paths |
| 67 | +- Use aliases consistently across both TypeScript and test files |
| 68 | +- Path aliases work in both development and build environments |
| 69 | + |
30 | 70 | ## Common Commands |
31 | 71 |
|
32 | 72 | ### Development |
|
0 commit comments