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.
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 0 tools
    🎥 0m 0s of videos
    📚 0m 0s of written content
  • Bonus videos
    🎥 0m 0s of videos
  • All updates
    ⏱️ Last update 2 months ago
  • 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.