Reusable Components
Course description
Master the art of writing highly reusable Vue — and make the most of your components. Reusable Components is all about how to make your components more flexible and reusable, saving you time and effort and helping you to get more done with less code.
Read more about the course
You'll go through in-depth lessons that cover the 6 Levels of Reusability, a framework for thinking about and understanding reusability in Vue.
It's a full-length video course covering:
- Best practices for using props — and what to do when there are too many
- Leveraging slots in unique ways to maximize flexibility without the headaches
- The tradeoffs between different patterns, how to use them, and why they work
Reusability is not just for component libraries
When you think of "reusability", you probably think of component libraries — a collection of components like buttons and sliders and checkboxes, that will be used dozens or hundreds of times throughout a single application.
But reusability is also important for the more custom made components in your application.
Reusing a component even two or three times saves a lot of effort and makes you more effective.
Plus, once you understand reusability more deeply you'll start to see opportunities for applying it all over your codebase.
This course isn't like any other course.
Most courses teach you syntax and how the API works. Things that you can probably learn on your own by reading the docs (if you have the time for that).
This course focuses on teaching you insights.
On getting you to think differently about your code, and understand how it works in a totally new way.
I spent months developing a framework for thinking about reusability in Vue
I drew on my years of experience building highly reusable components and component libraries, and came up with the 6 Levels of Reusability that this course is based on.
This framework is necessary for understanding reusability deeply. It gives us a way to talk about these concepts in a very organized and detailed way.
But these aren't laws of the universe.
I invented this framework in order to teach reusability to you. Perhaps there is a 7th level that I missed?
No fluff, no filler. Only what you need to master reusability
I hate wasting your time.
So I spent months agonizing over the outline, reworking it over and over again to make sure it only included what was absolutely necessary for you to master reusability.
In fact, I started to record the first few videos of this course, only to realize it wasn't good enough yet. So I went back again, reworking the course and how it flowed to make sure it was as good as it could be.
Watch Online
All Course Lessons (36)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Intro to Reusable Components Demo | 05:00 | |
| 2 | What is Reusability? | 09:04 | |
| 3 | Why Reusability is Important | 03:14 | |
| 4 | The 6 Levels of Reusability | 15:04 | |
| 5 | Templating Pattern | 07:40 | |
| 6 | Rule of Three | 04:42 | |
| 7 | Dealing with Large Components | 03:53 | |
| 8 | Configuration Pattern | 06:03 | |
| 9 | When to use Configuration | 03:49 | |
| 10 | Prop Explosions | 02:43 | |
| 11 | Tearing Everything Apart | 06:27 | |
| 12 | Base Component Pattern | 09:15 | |
| 13 | Adaptability Pattern | 07:01 | |
| 14 | When to use Adaptability | 01:52 | |
| 15 | Markup as a First-Class Data Type | 03:17 | |
| 16 | Planning for Flexibility | 06:45 | |
| 17 | Template Props | 03:12 | |
| 18 | Understanding Slots | 08:06 | |
| 19 | Inversion and Data (Part 1) | 13:36 | |
| 20 | Inversion and Data (Part 2) | 07:12 | |
| 21 | Inversion and Data (Part 3) | 05:43 | |
| 22 | When to use Inversion | 08:29 | |
| 23 | Inversion and Actions | 13:28 | |
| 24 | Keeping Things Clean and Tidy | 06:36 | |
| 25 | Understanding Scoped Slots | 09:02 | |
| 26 | Why are Scoped Slots Upside Down? | 07:08 | |
| 27 | Providing a Good Default Experience | 05:43 | |
| 28 | Intro to Extension Points | 05:20 | |
| 29 | Extension Points (Part 1) | 09:09 | |
| 30 | Extension Points (Part 2) | 06:32 | |
| 31 | A Note on App Architecture | 03:53 | |
| 32 | Extension Points (Part 3) | 10:17 | |
| 33 | When to use Extension | 05:56 | |
| 34 | Nesting Extension Points Through Component Trees | 10:59 | |
| 35 | Default Content at Every Level | 07:00 | |
| 36 | When to use Nesting | 07:32 |
Unlock unlimited learning
Get instant access to all 35 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Real-time chat with Node.js, Socket.io and Vue.js
Mastering Nuxt 3
