Go beyond the basics and master Vue.

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

The tools included in this toolkit 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

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

Monthly Q+A Videos

Each month I'll record a video answering questions from the community.

Learn from the questions of others, and get your own questions answered too!

Check it out for yourself

Live Preview

See what you'll learn

Tools

Check out some of the tools in the toolkit preview.

Props Down Events Up

Principle
Passing state
Learn the most important principle of state management and its implications.

Lifting State

Passing state
Learn how to pass state to cousin components that are far apart in the component tree.

Data Store

Passing state
Organizing logic
Learn the simplest way to share state between far away components.

Preserve Whole Object

Passing state
Learn when to pass a whole object as a prop and when to pass its individual properties.

Hidden Components

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

How to break up components
Conditionals
Learn how to break up components that use v-ifs into smaller, more focused components.

Combine Branches

When to break up components
How to break up components
Conditionals
Learn how to simplify complex conditional logic by combining branches.

Long Components

Principle
When to break up components
Learn how to determine when to break up components, and when you shouldn't bother.

Not Quite Mvc

Principle
Organizing logic
Learn how to apply the best parts of MVC to your Vue application.

Extract Composable

Organizing logic
Learn how to manage your business logic well by removing it entirely from components, and pushing it all into composables.

Humble Components

Organizing logic
Learn how to create Humble Components and greatly simplify your application.

Controller Components

Organizing logic
Learn how to connect your Humble components with your business logic using the special Controller component.

Thin Composables

Organizing logic
Learn how to further simplify your logic by separating business logic and reactivity.

Component Boundaries

How to break up components
Learn the most powerful way to break up components — by leveraging pre-existing boundaries.

Insider Trading

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

How to break up components
Loops
Learn how to abstract away the details of a list into a single component.

Item Component

How to break up components
Loops
Learn how to extract loops into simpler, single components.

Strategy

How to break up components
Conditionals
Learn how to simplify very complex conditional logic by using strategies.
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 18 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 18 tools
  • Interactive quizzes to test your knowledge
  • Videos to explore tools further
  • 30 day money back guarantee
  • Exclusive Discord community access
  • Any future updates to the toolkit
  • Bonus: Monthly Q+A videos
  • Bonus: Video archive of all Q+A videos
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.