Existing customer? Log in here →
Learn

Advanced Vue Component Design

Learn how to design simpler, more flexible components that are both more powerful and easier to maintain.

Sign up to get two free preview lessons on using portals to build better modal components.

Or buy now if you're already convinced!

I’ve been shipping Vue.js to production since the spring of 2015 and have learned a ton about writing maintainable, resilient Vue code that lasts.

“Your talk on scoped slots just blew my mind a little bit. 100% going to implement the template-less approach for vue-select.”
Jeff Sagal / Author of Vue-Select

When I first started using Vue, I fell in love because of how easy it made it to do what quickly turned into a mess with jQuery, like dynamically adding fields to a form or showing a loading state while firing off an AJAX request.

Three years later I’ve realized that Vue solves a lot of hard problems that I never expected it to solve, like:

Advanced Vue Component Design takes everything I know about using Vue to build more than basic UI widgets and bundles it up into one comprehensive course that you can work through in an afternoon.

“Adam is one of the few people whose content I'd recommend without flinching. This new Vue component design course is no different.”
Jeffrey Way / Creator of Laracasts

What's Inside

The full course clocks in at 34 lessons totaling 4 hours of content.

It covers topics like:

  • Building custom controlled components
  • Strategies for keeping logic encapsulated and making components more portable
  • Using composition to extend components instead of mixins or inheritance
  • How and why to use render functions, even if you aren’t using JSX
  • Using data provider components to reuse non-UI logic
  • Creating renderless components that are completely customizable
  • Designing compound components using Vue’s provide and inject features
  • Real-world case studies on building robust sortable list and search select components

Every lesson is as short as possible but no shorter, so you’ll learn everything you need to know in just the right amount of time at just the right pace.

The whole course is neatly organized by topic too, so it’s super easy to go back and find the exact lesson you’re looking for when you’re trying to apply these ideas on the job.

Building Controlled Components

Customizing Controlled Component Bindings

Wrapping External Libraries

Encapsulating Behavior: Global Events

Encapsulating Behavior: Direct DOM Manipulation

Encapsulating Behavior: Portals

Encapsulating Behavior: Reusing Portals

Injecting Content Using Slots

Native-Style Buttons Using Slots and Class Merging

Extending Components Using Composition

Passing Data Up Using Scoped Slots

Render Functions 101

Render Functions and Components

Render Functions and Children

Render Functions and Slots

Data Provider Components

Getting Started with Renderless Components

Passing Data Props

Passing Action Props

Passing Binding Props

Using Functions as Binding Props

Implementing Alternate Layouts with Renderless Components

Configuring Renderless Components

Wrapping Renderless Components

Pro

Building an Element Query Component

Pro

Compound Components and Provide/Inject

Pro

Building a Compound Sortable List Component

Pro

Building a Search Select: Data Bindings

Pro

Building a Search Select: Filtering

Pro

Building a Search Select: Focus Management

Pro

Building a Search Select: Making It Controlled

Pro

Building a Search Select: Keyboard Navigation

Pro

Building a Search Select: Click Outside Component

Pro

Building a Search Select: Integrating Popper.js

Get Advanced Vue Component Design

Choose the package that works for you.

Complete Package
  • Instant access to the private course area
  • Stream and download all 34 lessons, totaling 4 hours of content
  • Additional real-world component examples
  • Interactive source code examples for all 34 lessons
  • Lifetime access to any new material added to the course
Get Access $249 $139

Buying for your team? View team pricing options.

Essentials Package
  • Instant access to the private course area
  • Stream and download the first 24 lessons, totaling 2.5 hours of content
  • Interactive source code examples for the first 24 lessons
Get Access $149 $99

“The best part of Adam’s course is not only does he show you more advanced patterns for building Vue components, but he also walks you through the evolution of each piece, so you get a sense of why things work the way they do. This approach to teaching is excellent because it’s easier to remember, and you learn the concepts more deeply. Highly recommended!”

Sarah Drasner / Vue Core Team

Frequently Asked Questions

Can I pay with PayPal?

Sure! To pay with PayPal, just choose the "PayPal" option when checking out with Gumroad.

Pay with PayPal via Gumroad

An account will be created for you automatically and you'll receive an access link via email shortly after purchasing.

Can I get an invoice?

Absolutely! Right after purchasing you'll get a receipt which includes a link to generate an invoice with any extra information you need to add for your own accounting purposes.

How do I access and watch the videos?

All of the videos are hosted inside of a custom platform I put together just for this course.

Instead of downloading a bazillion gigs of content, you just login to the course area with your GitHub account and you’ll have access to everything right away.

Every video is available both to stream and to download. You don’t need to fill up your hard drive if you don’t want to, but you can also download lessons for offline viewing whenever you like!

Can I purchase multiple licenses for my team at a reduced price?

Sure! Here's what I've got for team pricing:

Team licenses can be purchased through Gumroad:

Buy a team license via Gumroad

After purchasing, you'll receive an email with unique access links you can distribute to the people on your team.

I have another question!

No problem! Shoot me an email and let’s chat!

Who am I?

Hey! I'm @adamwathan, author of Test-Driven Laravel and Refactoring to Collections, host of Full Stack Radio, and creator of Tailwind CSS.

I teach everything I know on my blog, through screencasts, and at conferences around the world.

Photo by Niels Luigjes 2016