In the "Reusable Components" course, Michael Thiessen teaches six levels of reusability for Vue components.
I started to understand these levels more deeply once I noticed that each level relies on a specific Vue feature to unlock new possibilities.
Here's a cheatsheet:
| Level of Reusability | Description | Vue feature |
|---|---|---|
| Templating | Reusing code by wrapping it up inside of a component | Template syntax |
| Configuration | Using configuration props to allow for varying behaviour | Props and emit |
| Adaptability | Allowing components to become future-proof | Slots |
| Inversion | Letting other components control the process | Scoped slots |
| Extension | Using reusability throughout our component | Named slots, including named scoped slots |
| Nesting | Creating powerful hierarchies of components | All of the above, plus provide & inject |