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 JS 3: The Composition API

Vue JS 3: The Composition APIudemy

Category: Vue
Duration 5 hours 24 minutes 26 seconds
Master Laravel, Vue 3 & Inertia Full Stack 2023

Master Laravel, Vue 3 & Inertia Full Stack 2023udemy

Category: Vue, Laravel
Duration 35 hours 53 minutes 40 seconds
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)udemy

Category: Vue
Duration 19 hours 57 minutes 29 seconds
AI Chat Bot with Vue.js and GPT-4

AI Chat Bot with Vue.js and GPT-4vueschool.io

Category: ChatGPT, Vue
Duration 1 hour 46 minutes 30 seconds