Learn design patterns in Vue.

Learn the right tools — techniques, principles, and patterns for building incredible Vue applications.

This will help you solve some of the most painful problems you face every day as a Vue developer:

  • Master the Art of Component Splitting & Combining — knowing when (and when not) to break up components is crucial
  • Seamlessly Manage State Across Components — especially as your component tree grows in complexity
  • Organize & Reuse Logic in Components with Ease — you'll learn the three types of components you need to keep your logic organized
  • and more!
Introducing the

Clean Components Toolkit

spacer
spacer
spacer
A list of different things you'll find in the toolkit

What you'll learn

  • Revamp your `v-if` usage: a simple technique that can clean up your codebase, making it more readable and maintainable.
  • Discover the core principle of state management in Vue, with profound implications that could reshape your entire approach to app architecture.
  • Explore a rarely discussed concept that dictates state behavior, rooted in Vue's foundational principles — a game-changer for advanced developers.
  • A fresh approach to MVC in Vue: Adapt and apply the best aspects of this classic paradigm to simplify your app's architecture while staying true to Vue's essence.
  • Discover why extracting all logic from components is the key to a more scalable and maintainable Vue application.
  • Thin Composables: A method to significantly simplify your composables, making them easier to write, debug, and test.
  • Transform your list handling with a pattern that every Vue developer should know, making your work with `v-for` directives more efficient and cleaner.
  • Unearth hidden components within your existing code, a method that enhances modularity and transforms how you think about component splitting.
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.

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.

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.

Learn from the questions of others

Bonus Videos

A collection of bonus videos that don't really fit into a particular section.

Some of these are questions from other students, some are just extra things I want to share!

Check it out for yourself

Live Preview

See what you'll learn

Tools

Check out some of the tools in the toolkit preview.

Preserve Whole Object

Video:9m 55s
Written:34m 0s
Passing state
Learn when to pass a whole object as a prop and when to pass its individual properties.

Lifting State

Video:11m 58s
Written:23m 0s
Passing state
Learn how to pass state to cousin components that are far apart in the component tree.

Data Store

Video:16m 1s
Written:29m 0s
Passing state
Organizing logic
Learn the simplest way to share state between far away components.

Inline Composables

Video:10m 0s
Written:15m 0s
Passing state
Learn how to refactor incrementally and keep your app in a good state

Props Down Events Up

Video:6m 2s
Written:5m 0s
Principle
Passing state
Learn the most important principle of state management and its implications.

Hidden Components

Video:12m 3s
Written:13m 0s
When to break up components
How to break up components
Learn how to discover components that are hidden inside of other components, and how to separate them out.

Extract Conditional

Video:6m 25s
Written:11m 0s
How to break up components
Conditionals
Learn how to break up components that use v-ifs into smaller, more focused components.

Combine Branches

Video:10m 13s
Written:7m 0s
When to break up components
How to break up components
Conditionals
Learn how to simplify complex conditional logic by combining branches.

Long Components

Video:9m 40s
Written:16m 0s
Principle
When to break up components
Learn how to determine when to break up components, and when you shouldn't bother.

Not Quite Mvc

Video:3m 39s
Written:4m 0s
Principle
Organizing logic
Learn how to apply the best parts of MVC to your Vue application.

Extract Composable

Video:12m 59s
Written:40m 0s
Organizing logic
Learn how to manage your business logic well by removing it entirely from components, and pushing it all into composables.

Humble Components

Video:11m 45s
Written:1h 0m
Organizing logic
Learn how to create Humble Components and greatly simplify your application.

Controller Components

Video:12m 36s
Written:23m 0s
Organizing logic
Learn how to connect your Humble components with your business logic using the special Controller component.

Layers Of Abstraction

Video:5m 49s
Written:11m 0s
Principle
Organizing logic
Learn the underlying principle that makes not-quite-mvc work so well.

Thin Composables

Video:15m 29s
Written:31m 0s
Organizing logic
Learn how to further simplify your logic by separating business logic and reactivity.

Lightweight State Management

Video:6m 56s
Written:25m 0s
Organizing logic
Learn a simple and straightforward alternative to the Data Store

Component Boundaries

Video:17m 15s
Written:26m 0s
How to break up components
Learn the most powerful way to break up components — by leveraging pre-existing boundaries.

Insider Trading

Video:7m 1s
Written:13m 0s
When to break up components
How to break up components
Learn how to discover and refactor child components that are highly coupled to their parents.

List Component

Video:9m 50s
Written:7m 0s
How to break up components
Loops
Learn how to abstract away the details of a list into a single component.

Item Component

Video:12m 47s
Written:12m 0s
How to break up components
Loops
Learn how to extract loops into simpler, single components.

Strategy

Video:6m 23s
Written:7m 0s
How to break up components
Conditionals
Learn how to simplify very complex conditional logic by using strategies.

Bonus Videos

Video:40m 31s
Written:1m 0s
Check out the the bonus videos where I answer your questions (and more) about the Clean Components Toolkit.
What others are saying

Reviews

The Clean Components Toolkit's approach of delivering concise and to-the-point lessons made the learning process feel effortless, and I found myself absorbing information more effectively, leading to a deeper understanding of the subject matter.

I love this approach and has proven to be way more effective than your regular standard course.

Alex RodriguezSoftware Developer

I've found Michael's method of explaining concepts to be refreshingly distinct.

His seamless integration of video content alongside text blogs has made the learning experience truly engaging.

Profile picture of Albert
AlbertSoftware Developer

I've seen a bunch of the content, it's great, and I'm excited to see the rest!

Profile picture of Lachlan Miller
Lachlan MillerVue Core Team Member

Great format and info layout! The quiz and each section format is nice — bite sized is key, great idea.

Profile picture of Robin Watson
Robin WatsonFront End Developer

I love what I've seen in my (very brief) look at the toolkit so far — it reminds me of Martin Fowler's Refactoring.

Profile picture of Chris O'Sullivan
Chris O'SullivanSoftware Developer
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?

3 Day Workshop
$1197 *
  • 3 days of live training covering all tools
  • Deep discussions with peers on important topics
  • Exercises to practice using the tools and apply your knowledge
  • Limited spots available to ensure a high quality experience
Not currently for sale
Mastery
$297
  • Access to all 21 tools
    🎥 3h 34m of videos
    📚 6h 41m of written content
  • Bonus videos
    🎥 40m 31s of videos
  • All updates
    ⏱️ Last update last week
  • Interactive quizzes to test your knowledge
  • Videos to explore tools further
  • 30 day money back guarantee
  • Exclusive Discord community access
Premium
$197
  • Access to 6 basic tools
  • 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 using this toolkit?

The toolkit is designed for those working as Vue developers, but all you need is a basic familiarity with Vue and JavaScript.

How long does it typically take to go through the entire toolkit?

I have no data on this yet, but I would estimate between 10-15 hours. However, the toolkit is also designed as a reference, so you can dip in and out as you need.

What is the refund policy?

You can get a full refund within 30 days of purchasing the toolkit.

Will you include tools on Pinia or Vuex?

The tools will focus on the Vue framework itself, but the principles and patterns will be applicable to any state management library you want to use.

Are there any student discounts?

No. This toolkit 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 to the toolkit 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 is the toolkit delivered?

The toolkit is delivered through my online platform.

Do you support Purchasing Power Parity?

Yes! If you are eligible, you will see a banner at the top with a discount code you can use, if you need.

Is this a different product than Clean Components?

Yes. The Clean Components course was the very first thing I ever released.

This toolkit solves the same problems (and more!), but with different content and in a completely different format.

The Clean Components Toolkit replaces the prior Clean Component course.