Advanced Vue Component Design

3h 57m 19s
English
Paid

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.

Read more about the course

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. 

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

Watch Online Advanced Vue Component Design

Join premium to watch
Go to premium
# Title Duration
1 Building Controlled Components 12:22
2 Customizing Controlled Component Bindings 01:28
3 Wrapping External Libraries 12:46
4 Encapsulating Behavior: Global Events 11:57
5 Encapsulating Behavior: Direct DOM Manipulation 08:09
6 Encapsulating Behavior: Portals 14:04
7 Encapsulating Behavior: Reusing Portals 03:33
8 Injecting Content Using Slots 06:11
9 Native-Style Buttons Using Slots and Class Merging 01:48
10 Extending Components Using Composition 10:23
11 Passing Data Up Using Scoped Slots 09:59
12 Render Functions 101 03:31
13 Render Functions and Components 04:19
14 Render Functions and Children 02:21
15 Render Functions and Slots 04:00
16 Data Provider Components 11:55
17 Getting Started with Renderless Components 04:47
18 Passing Data Props 02:14
19 Passing Action Props 02:20
20 Passing Binding Props 09:41
21 Using Functions as Binding Props 03:06
22 Implementing Alternate Layouts with Renderless Components 04:08
23 Configuring Renderless Components 01:47
24 Wrapping Renderless Components 06:10
25 Building an Element Query Component 07:45
26 Compound Components and Provide/Inject 09:56
27 Building a Compound Sortable List Component 21:18
28 Building a Search Select: Data Bindings 06:03
29 Building a Search Select: Filtering 05:04
30 Building a Search Select: Focus Management 02:42
31 Building a Search Select: Making It Controlled 05:40
32 Building a Search Select: Keyboard Navigation 14:53
33 Building a Search Select: Click Outside Component 05:12
34 Building a Search Select: Integrating Popper.js 05:47

Similar courses to Advanced Vue Component Design

Vue 3, Nuxt.js and NestJS: A Rapid Guide - Advanced

Vue 3, Nuxt.js and NestJS: A Rapid Guide - Advancedudemy

Category: NestJS, Vue, Nuxt
Duration 7 hours 37 minutes 36 seconds
The Vue Firebase Project Course

The Vue Firebase Project Coursefireship.io

Category: Vue
Duration 46 minutes 28 seconds
Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)zerotomastery.io

Category: Vue
Duration 27 hours 56 minutes 34 seconds
Test with Jest

Test with Jestvueschool.io

Category: Vue, Other (QA)
Duration 52 minutes 39 seconds
Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)udemy

Category: Vue, Shopify
Duration 6 hours 37 minutes 49 seconds
Vue - The Complete Guide (incl. Router & Composition API)

Vue - The Complete Guide (incl. Router & Composition API)Academind Pro

Category: Vue
Duration 28 hours 45 minutes 29 seconds