VOOZH

URL: https://adamwathan.me/advanced-vue-component-design/

⇱ Advanced Vue Component Design

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.

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.”

👁 Image
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:

Keeping logic portable and encapsulated, even when it interacts with disconnected parts of the DOM
Completely customizing how a component looks without a bunch of CSS overrides or complex configuration options
Making it easy to simulate desperately needed browser features like element queries, without waiting another 5 years for support

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.”

👁 Image
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 👁 Image

Building an Element Query Component

Pro 👁 Image

Compound Components and Provide/Inject

Pro 👁 Image

Building a Compound Sortable List Component

Pro 👁 Image

Building a Search Select: Data Bindings

Pro 👁 Image

Building a Search Select: Filtering

Pro 👁 Image

Building a Search Select: Focus Management

Pro 👁 Image

Building a Search Select: Making It Controlled

Pro 👁 Image

Building a Search Select: Keyboard Navigation

Pro 👁 Image

Building a Search Select: Click Outside Component

Pro 👁 Image

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 $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

“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:

3 Developers – $349
5 Developers – $549
8 Developers – $849
10 Developers – $999
12 Developers – $1199
15 Developers – $1499
20 Developers – $1999
25 Developers – $2499

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