This is a minimal example implementation of Clean Architecture in Vue/Quasar
- Advanced error handling (Either)
- Test-driven development
- Dependency injection
- Data mapping
The project architecture consists of 4 levels: Presentation, Application, Domain and Data (Infrastructure).
The characteristics of the layers are as follows:
- Presentation: This layer is basically made of UI components. The Presentation Layer is directly coupled to the Application Layer.
- Application: This layer contains application logic. It knows of the Domain Layer and the Infrastructure Layer.
- Domain: This layer is for domain/business logic. Only business logic lives in the Domain layer, so there is just pure JavaScript/TypeScript code with no frameworks/libraries whatsoever here.
- Data: This layer is responsible for communications with the outside world (sending requests/receiving responses).
The app consists of 1 module - bookmarks.
bookmarks/
├── data/
│ └── repositories
├── domain/
│ ├── entities
│ └── repositories
├── application/
│ └── services
├── presentation/
│ ├── components
│ ├── containers
│ ├── controllers
│ ├── pages
│ ├── stores
│ └── routes.ts
└── index.ts
npm install
npm run dev
npm run lint
npm run build