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
  • Unlock Secrets to Effortless Component Testing
  • 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
  • Learn Effective Folder Structures to Keep Your App Organized — it's not just about camelCase vs kebab-case
Introducing the

Clean Components Toolkit

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

Refactoring Examples

Then you get to see the tool in action — through a step-by-step refactoring example.

These examples use custom built software to more clearly demonstrate what's going on. View them one step at a time or in a more traditional article view.

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!

A sneak peek

Tools

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.

Combine Branches

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

Component Boundaries

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

Extract Conditional

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

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.

Item Component

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

List Component

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

Long Components

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

Strategy

How to break up components
Conditionals
Learn how to simplify very complex conditional logic by using strategies.
More coming soon
Not fully completed — yet

Prerelease

This toolkit is not quite done yet.

Right now I've got the first 9 tools. This first set of tools focuses on when and how to split up components.

I expect to complete all the tools by the Fall of 2023.

FAQ

Still have questions?

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.

What is the refund policy?

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

When will the toolkit be completely finished?

Fall of 2023.

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.

Will you be doing Purchasing Power Parity?

Right now there is no plan to do this.