Advanced Vue Component Design
3h 57m 19s
English
Paid
Course description
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
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 |
Comments
0 commentsSimilar courses

The Ultimate Guide to Vue Performance
Sources: vueschool.io
In today's world, the performance of web applications is of paramount importance. In this course, you will learn how to maintain the speed of your Vue...
2 hours 31 minutes 10 seconds

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)
Sources: zerotomastery.io
The only Vue.js tutorial + projects course you need to learn Vue (including all new Vue 3 features), build large-scale Vue applications from scratch & get hired as a Vue develop...
27 hours 56 minutes 34 seconds

Build an Image Filters App with Vue, TypeScript and WebAssembly
Sources: zerotomastery.io
With this project you'll build "Vue Filters", an image filter application built with Vue that allows you to bring the experience of applying Photoshop filters t
1 hour 44 minutes 19 seconds

Full Stack Isomorphic JavaScript with Vue.js & Node.js
Sources: udemy
Learn to build full-stack isomorphic JavaScript web applications with Vue and Node.js along with the MEVN stack. The MEVN stack is a collection of great tools—M
5 hours 33 minutes 49 seconds
Want to join the conversation?
Sign in to comment