SOLID principles in Vue.js components

The goal of this project is to showcase how you can apply the SOLID principles to Vue.js components, by following a series of refactorings:

🎯 SRP - The Single Responsibility Principle

• Extract LocalStorageProductsService

🧵 ISP - The Interface Segregation Principle

• Extract Products view and SearchBox component

🚪 OCP - The Open-Closed Principle

• Extract get-product-list-item-component function

🧩 LSP - The Liskov Substitution Principle

• Create product-card that knows how to render a product card

🔌 DIP - The Dependency Inversion Principle

• Invert dependency between products view and productsService

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev