Few days ago, my friend Philipp decided to create a new business (a bakery to cook awesome cookies) and asked me to help him create a todo list application where he can write his tasks. He decided to use Vue.JS as a frontend framework, but really didn’t know how to keep his app easy to extend and maintain in the future. He heard some myths about solid (what is the solid means???) principles and clear architecture, but had no idea how to use them in Vue.JS app.

In this article I’d like to discuss how can we avoid SOLID principles violation in our Vue.JS project.

What is SOLID? SOLID is acronym created by Michael Feathers and promoted by American software engineer Robert C. “Uncle Bob” Martin in his book “Design Principles and Design Patterns”. These principles are very important part of Object Oriented Programming paradigm intended to make our program more flexible, readable and maintainable for next development. SOLID principles include next concepts:

Single responsibility principle

Open-close principle

Liskov substitution principle

Interface segregation principle

Dependency inversion principle

Let’s look at all of these principles in real Vue.JS project and how can we avoid principles violations. We are going to create simple Todo list application.