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

See Configuring quasar.config.js.