Write less code.
Get more done.
Learn how to make the most of your Vue components by mastering the art of highly reusable components.
- The 6 Levels of Reusability show us how to give each component the right level of reusability
- 20 different in-depth patterns, principles, and ideas to help you reuse components better
- Step-by-step refactoring examples show you how to apply the patterns to real-world code
- Quizzes and hours of video to maximize your learning
Reusable Components
Your ideas about sending data "wherever I want" (within the hierarchy of components) just blew me away.
What you'll learn
Reusable Components has tons of insights that will help you take your code to the next level. Here is a small sample of them:
- Understand how scoped slots really work — it's simpler than you think if you approach it from the right angle
- Why giving more control to child components creates a massive opportunity. This is one of the most important concepts in the entire course.
- The 3 different kinds of props and how they affect reusability
- Prop explosions — what they are and how to deal with them effectively
- The simplest way to reuse your components (you're probably doing this one without knowing it)
- A simple rule of thumb to determine when reusability is bad for your code
- The Base Component Pattern, which lets you hide complexity and have greater control over how components are used
- How to make your components adaptable to any future use case — even ones you never thought of
- Why scoped slots are actually "upside-down"
The 6 Levels of Reusability
In order to create this course, I first had to invent a way of talking about reusability in components. If you can't talk about it, you can't teach it.
This course will take you through all 6 levels, giving you patterns and insights along the way.
Each level builds on the complexity of the last, giving you the ability to add more and more flexibility and reusability into your components.
So here it is, The 6 Levels of Reusability:
1. Templating — Reusing code by wrapping it up inside of a component
2. Configuration — Using configuration props to allow for varying behaviour
3. Adaptability — Allowing components to become future-proof
4. Inversion — Letting other components control the process
5. Extension — Using reusability throughout our component
6. Nesting — Creating powerful hierarchies of components
Tool Overview
Each tool has a short and sweet description, like a tip but a little more in-depth.
Use this to quickly learn the tool, and easily refresh yourself as you need to.
Video + Written Lectures
Do you like video? Or maybe you prefer to read?
Either way, I've got you covered. All the material in the course is covered in hours of video lectures as well as written articles.
Consume the material in whatever you like best — or go through both if you've got the time.
Step-by-step Refactoring Examples
Then you get to see the tool in action — through a step-by-step refactoring example.
Take your time to read the code, go back and forth, and really understand how the tool works.
Article-style Refactoring Examples
If you don't like the step-by-step approach, you can also read the refactoring examples in article form.
These are the same examples as the step-by-step ones, just in a more traditional format.
Live Code Demos
See the code changes and play around with the demos.
It's much easier to understand refactoring when you understand the end result.
Interactive Quizzes
Exercises for patterns and principles are long and tedious and don't get to the heart of it.
Instead, quizzes are short and sweet and help you solidify your knowledge in a more direct way.
Video Explanations
Sometimes you just need to hear it explained in a different way.
These videos go through the quiz questions, explaining the answers and the reasoning behind them.
You'll also hear me talk about the tool in more detail, and how it fits into the bigger picture of component design.
Discord Community
One of the greatest parts of Vue is the community.
Ask questions, get help, and share your work with other Vue devs who are going through the same problems as you.
What's Inside
Templating
Rule Of Three
Dealing With Large Components
Configuration
Prop Explosions
Base Component
Adaptability
Template Props
Understanding Slots
Inversion And Data
Inversion And Composables
Inversion And Actions
Prop Getters
Understanding Scoped Slots
Why Scoped Slots Are Upside Down
Good Default Experience
Extension Points
Extending Logic
Nesting
Default Content At Every Level
Reviews
Michael does a fantastic job explaining the complex topic of scoped slots in a way that I'm sure is straightforward to understand by all levels of Vue.js developers. You'll learn everything you need to know about slots to build highly reusable components.
I thought I knew all there was to know about reusable components but after finishing the templating section (particularly the Rule of Three lesson), my eyes were opened.
This course is very informative, exceptionally well structured, and with excellent examples. Now I have a lot of ideas for refactoring some of my old code.
Michael is an excellent teacher. He clearly explains each step in building reusable Vue components, and when those concepts should be implemented. Anyone who is interested in a more maintainable Vue codebase would benefit from this course.
I recently purchased Reusable Components, and it's great!
Great concepts, great examples, great course. Worth it.
An amazing course which explained some of the advanced Vue concepts so clearly (especially the inversion/scoped slot module).
This was one of the best courses I bought so far :)
I really appreciated your style of teaching and I am absolutely satisfied with the course. I realized that the code I am currently writing is not that far from your teachings. This reassured me.
Michael has one of the most concise and easy to understand teaching methods for Vue. The lesson on slots was very useful to know what Vue is doing under-the-hood when creating Slots.
Your ideas about sending data "wherever I want" (within the hierarchy of components) just blew me away.
Money-Back Guarantee
My job is to give you a product that you'll enjoy and learn from. If those things don't happen, I've failed, and I don't deserve your money.
Simply email me at michael@michaelnthiessen.com within 30 days and I'll give you a refund!
Which package will you choose?
Access to all 19 tools and patterns- 3.5 hours of video lectures
- Interactive quizzes to test your knowledge
- Videos to explore tools further
- 30 day money back guarantee
- Exclusive Discord community access
- Any future updates
- Access to the first 6 tools and patterns
- Interactive quizzes to test your knowledge
- Videos to explore tools further
- 30 day money back guarantee
Still have questions?
Are there prerequisites or a recommended skill level for Reusable Components?
It is designed for intermediate to advanced Vue developers, so you need to already be fairly comfortable using Vue.
Is this different than the Clean Components Toolkit?
Yes! It is completely different material, with no overlap.
Reusable Components is focused on getting more done with less code, while Clean Components Toolkit is focused on writing more maintainable code that causes less headaches.
Do the videos have subtitles / closed captioning?
Yes! All the lecture videos have English subtitles included.
Do you support Purchasing Power Parity?
Yup! If you are eligible, you will see a banner at the top with a discount code you can use, if you need.
What is the refund policy?
You can get a full refund within 30 days of purchasing if you do not like it.
Are there any student discounts?
No. This is designed to help professional developers solve important problems that come up in their work. Students will not find much value in this.
Are updates included in the purchase, or are they available separately?
You will get any future updates for free, but I have no specific plans yet on what those updates will be or when they will happen.
How long does it typically take to go through the entire thing?
I have no data on this yet, but I would estimate between 5-10 hours.