Advanced Vue Component Design

Advanced Vue Component Design

English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 4 Hours | 1.09 GB

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.

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.

Table of Contents

01 Building Controlled Components
02 Customizing Controlled Component Bindings
03 Wrapping External Libraries
04 Encapsulating Behavior: Global Events
05 Encapsulating Behavior: Direct DOM Manipulation
06 Encapsulating Behavior: Portals
07 Encapsulating Behavior: Reusing Portals
08 Injecting Content Using Slots
09 Native-Style Buttons Using Slots and Class Merging
10 Extending Components Using Composition
11 Passing Data Up Using Scoped Slots
12 Render Functions 101
13 Render Functions and Components
14 Render Functions and Children
15 Render Functions and Slots
16 Data Provider Components
17 Getting Started with Renderless Components
18 Passing Data Props
19 Passing Action Props
20 Passing Binding Props
21 Using Functions as Binding Props
22 Implementing Alternate Layouts with Renderless Components
23 Configuring Renderless Components
24 Wrapping Renderless Components
25 Building an Element Query Component
26 Compound Components and Provide/Inject
27 Building a Compound Sortable List Component
28 Building a Search Select: Data Bindings
29 Building a Search Select: Filtering
30 Building a Search Select: Focus Management
31 Building a Search Select: Making It Controlled
32 Building a Search Select: Keyboard Navigation
33 Building a Search Select: Click Outside Component
34 Building a Search Select: Integrating Popper.js