Michael Thiessen

Design patterns in @vuejs are incredibly useful.

But how many of them do you know?

Here are 6 different patterns from the Clean Components Toolkit.

@vuejs In growing applications, prop drilling and event frothing increase complexity, as state and events are passed through many component layers.

The Data Store Pattern solves this by creating a global state singleton, exposing parts of this state, and including methods to modify it. 

@vuejs The Thin Composables Pattern introduces an additional layer of abstraction, separating the reactivity management from the core business logic.

Here we use plain JavaScript or TypeScript for business logic, using pure functions, with a thin layer of reactivity on top. 

@vuejs Humble Components are designed for simplicity, focusing on presentation and user input, keeping business logic elsewhere.

Following the "Props down, events up" principle, these components ensure clear, predictable data flow, making them easy to reuse, test, and maintain. 

@vuejs To simplify templates with multiple conditional branches, we extract each branch's content into separate components.

This improves readability and maintainability of the code. 

@vuejs Extract your logic into composables, even for single-use cases.

This helps us keep logic separate from UI.

Composables also make it easy to add related methods and state, such as undo and redo features. 

@vuejs Large lists in components can lead to cluttered and unwieldy templates.

The solution?

Abstract the v-for loop logic into a child component.

This simplifies the parent and encapsulates the iteration logic in a dedicated list component, keeping things nice and tidy. 

@vuejs These tools (and more) are all included in Clean Components Toolkit, where each pattern also includes:

- Edge cases and common mistakes
- In-depth refactoring example
- Quiz to test your knowledge
- Video to go over quiz answers and add further explanation

@vuejs If you enjoyed this thread:

1. Follow me @MichaelThiessen for more of these
2. RT the tweet below to share this thread