Learn composable design patterns in Vue.

Learn the right techniques, principles, and patterns for crafting brilliant composables.

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

  • Build More Flexible & Reusable Code — design composables that handle different input types and return values dynamically
  • Eliminate Prop Drilling & Event Frothing — share state across components without passing through multiple layers
  • Write More Testable Business Logic — separate pure functions from reactive code for easier testing and maintenance
  • and much more!
Introducing

Composable Design Patterns

Essential Composable Patterns

What you'll learn

Here's a taste of what you'll learn:

  • Master the “Thin Composables Pattern” to separate reactivity from business logic — a technique senior Vue developers use to simplify debugging and testing.
  • Transform messy parameter lists into clean, maintainable code with the Options Object Pattern — the professional approach to function inputs.
  • Discover the Reactivity Boundary Pattern: Strategic placement of reactivity breaks to prevent cascading updates and improve performance.
  • Beyond Pinia: Learn lightweight state management techniques that eliminate prop drilling without the overhead of a full state manager.
  • Harness the power of TypeScript in Vue with MaybeRef<T> and other utility types for type-safe composables.
  • Scale with confidence using the Dynamic Return Pattern — future-proof your features from day one.
  • Write testable composables by cleanly separating business logic from reactivity concerns.
  • Create framework-agnostic logic that seamlessly ports between Vue, React, and other frameworks — making it more robust and reusable.
  • Master dependency isolation techniques to build truly independent, maintainable components.
  • Leverage toValue() to elegantly handle refs, raw values, and computed properties in your composables.
Understand the pattern at a glance

Pattern Overview

Each pattern has a detailed description, covering the pattern's purpose, how it works, and how to implement it.

It also covers edge cases, variations, and common pitfalls.

Understand in more detail

Step-by-step Refactoring Examples

Then you get to see the pattern 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 pattern 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.

Check it out for yourself

Live Preview

See what you'll learn

Patterns

Check out some of the patterns in the course preview.
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

Launch discount ends soon!

Mastery
$197
$127
  • Access to all 5+ patterns
    📅 More patterns coming early 2025
  • All updates
    ⏱️ Last update last week
  • In-depth pattern overviews
  • Real-world demos
  • Step-by-step refactoring guides
  • 30 day money back guarantee
Premium
$127
$97
  • Access to initial 5 patterns
  • In-depth pattern overviews
  • Real-world demos
  • Step-by-step refactoring guides
  • 30 day money back guarantee
For team pricing, email me at michael@michaelnthiessen.com
FAQ

Still have questions?

How is this course different from Clean Components Toolkit?

Clean Components Toolkit contains patterns for writing components, where this course contains patterns for writing composables.

Does this use Vue 3 and the Composition API?

Yes! It's all about composables, so the entire thing is written using the Composition API.

Are there prerequisites or a recommended skill level for using this course?

The course 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 course?

I have no data on this yet, but I would estimate between 5-10 hours. However, the course 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 course.

Are there any student discounts?

No. This course 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 course 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 course delivered?

The course is delivered through my online platform.