Folder Structure

src/
├── app/                # App bootstrap, router config, styles, bootstrap logic
│   ├── app.vue         # Root component, mounts <router-view />
│   ├── main.ts         # Application entry point, initializes app, injects plugins
│   ├── bootstrap.ts    # Bootstrap function, starts mock service worker in dev
│   ├── providers/
│   │   └── router/     # Router configuration (vue-router)
│   ├── styles/         # Global styles
│   └── assets/         # Static assets (logo, images, ...)
├── entities/           # Domain entities (currently empty)
├── features/           # Independent features (currently empty)
├── pages/              # Main application pages
│   └── home/           # Example Home page
│       └── index.vue   # Home page, example using QueryBoundary and useGetUsers
├── shared/             # Shared components, libraries, and services
│   ├── lib/
│   │   └── axios/      # Axios configuration and custom instance
│   ├── services/
│   │   ├── api/        # API layer (models, types, hooks)
│   │   │   ├── hooks/  # API hooks (auto-generated by orval)
│   │   │   ├── models/ # Data models (User, ...)
│   │   │   └── types/  # Types, schemas (zod)
│   │   └── msw/        # Mock service worker configuration (handlers, browser)
│   └── ui/
│       └── query-boundary/ # UI component for query boundaries (loading, error, data)
└── vite-env.d.ts       # TypeScript env types

Main Components

• app/: Application bootstrap, router config, styles, mock server bootstrap.
• entities/: Domain entities (currently empty, for shared entities).
• features/: Place for developing independent, reusable features (currently empty).
• pages/: Contains main application pages, each page in its own folder.
• shared/: Shared components such as UI, services, libraries, API hooks, mock server, etc.
  • lib/axios/: Axios configuration and custom instance.
  • services/api/: Auto-generated code from OpenAPI (orval), including models, types (zod), API hooks.
  • services/msw/: Mock service worker configuration for API simulation in development.
  • ui/query-boundary/: UI component for query boundaries (loading, error, data).

Technologies Used

• Vue 3
• TypeScript
• Vite
• Vue Router
• @tanstack/vue-query
• MSW (Mock Service Worker)
• Orval (auto-generates API code from OpenAPI)
• Zod (schema validation)
• Axios

Getting Started

pnpm install
pnpm dev

Notes

• In development mode, MSW will automatically start to mock API requests.
• API hooks are auto-generated from the openapi.yaml file using orval.
• You can extend features, entities, and pages as needed for your real use case.