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
Introducing

Reusable Components

Your ideas about sending data "wherever I want" (within the hierarchy of components) just blew me away.

Doug Franklin
A few different things you'll learn in the course

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 foundational framework

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

Understand the tool at a glance

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.

Learn in your favourite format

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.

Understand in more detail

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.

If you prefer a more traditional approach

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.

See it all in action

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.

Understand through application

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.

Understand through explanation

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.

Get help when you need it

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.

Check it out for yourself

Live Preview

See what you'll learn

What's Inside

Check out some of the tools in the live preview

Templating

1. Templating
Learn how to use the Templating Pattern to reuse markup across different components.

Rule Of Three

1. Templating
Learn when creating highly reusable components are a waste of your time.

Dealing With Large Components

1. Templating
Learn how to deal with large components when using the Templating Pattern.

Configuration

2. Configuration
Learn how to use the Configuration Pattern to create components that are more flexible.

Prop Explosions

2. Configuration
Learn about the biggest problem with props and ways that you can solve it.

Base Component

2. Configuration
Learn the most powerful way to manage prop explosions in your components.

Adaptability

3. Adaptability
Learn how to use the Adaptability Pattern to create components that are robust against future changes.

Template Props

3. Adaptability
Learn about the most important type of prop and how it can be used to create more reusable components.

Understanding Slots

3. Adaptability
Learn how slots work at a deep and fundamental level, so you can leverage them for more advanced patterns.

Inversion And Data

4. Inversion
Learn the ins and outs of passing data between components to keep them flexible.

Inversion And Composables

4. Inversion
Understand how composables are deeply compatible with the Inversion Pattern.

Inversion And Actions

4. Inversion
Learn why and how treating functions as first-class citizens can dramatically increase reusability.

Prop Getters

4. Inversion
Learn a powerful pattern for organizing and cleaning up Inversion Pattern components.

Understanding Scoped Slots

4. Inversion
Take your deep understanding of slots and further expand it to understand how scoped slots work.

Why Scoped Slots Are Upside Down

4. Inversion
A curious but useful insight into how scoped slots actually work.

Good Default Experience

4. Inversion
Learn how to make sure that your highly reusable components are actually highly used.

Extension Points

5. Extension
Learn how to extend the Inversion Pattern to make it insanely easy to add and override features in your components.

Extending Logic

5. Extension
Learn a few tricks for extending the logic of your components once they are built.

Nesting

6. Nesting
Learn how to nest components at any level of your component tree without sacrificing flexibility.

Default Content At Every Level

6. Nesting
Learn how to override the default content at any level of your component tree.
What others are saying

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.

Profile picture of Markus Oberlehner
Markus Oberlehner

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.

Profile picture of Miko
Miko

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.

Profile picture of Ramona
Ramona

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.

Profile picture of Lindsay Wardell
Lindsay Wardell

I recently purchased Reusable Components, and it's great!

Profile picture of Victor Martins Onuoha
Victor Martins Onuoha

Great concepts, great examples, great course. Worth it.

Profile picture of Jose Burgon
Jose Burgon

An amazing course which explained some of the advanced Vue concepts so clearly (especially the inversion/scoped slot module).

Tushar Tyagi

This was one of the best courses I bought so far :)

Dávid Rehak

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.

Pierpaolo Calanna

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.

David Estrada

Your ideas about sending data "wherever I want" (within the hierarchy of components) just blew me away.

Doug Franklin
Don't like it? Don't worry!

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!

Pricing

Which package will you choose?

Mastery
$197
$128
  • 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
Essentials
$167
$108
  • Access to the first 6 tools and patterns
  • Interactive quizzes to test your knowledge
  • Videos to explore tools further
  • 30 day money back guarantee
For team pricing, email me at michael@michaelnthiessen.com
FAQ

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.