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.
Advanced Vue Component Design
3h 57m 19s
English
Paid
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
About the Author: Adam Wathan
Adam Wathan is the creator of Tailwind CSS — the utility-first CSS framework that has reshaped how front-end engineers write styles since its 2017 release. He is also a co-founder of Tailwind Labs (the company behind Tailwind CSS, Tailwind UI, Headless UI, and Heroicons), the host of the Full Stack Radio podcast, and the author of Refactoring UI (with Steve Schoger).
His paid course catalog covers Tailwind CSS in depth (the framework's design philosophy, advanced patterns, plugin authoring), the broader modern CSS landscape, refactoring patterns for UI work, advanced Vue.js (he was a long-running Vue advocate before Tailwind became the primary work), Test-Driven Laravel, and the design-engineering boundary material that bridges UI design and front-end implementation.
The CourseFlix listing under this source carries 5 Adam Wathan courses spanning that range. Material is paid; Adam's courses are sold individually on adamwathan.me on the original platform. Courses are aimed at developers and designers serious about the craft of building interfaces.
Watch Online 34 lessons
0:00
/ #1: Building Controlled Components
All Course Lessons (34)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Building Controlled Components Demo | 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 |
Unlock unlimited learning
Get instant access to all 33 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 2y agoVue 3, Nuxt.js and Laravel: A Practical Guide
By: UdemyLearn how to create 3 different apps with Vue 3, Nuxt.js and Laravel. The first app will be an Admin app using Vue 3 Composition API The second app will be an I10h 17m5/5 -
Updated 1y agoGenerating Fake Data with Faker.js
By: Vue SchoolEvery user application relies on data , whether it's user profiles, product lists, or blog posts.51m -
Updated 1y agoContent Sites with Astro and Vue.js
By: Vue SchoolWant to create a fast and efficient site with content? In this course, you will learn how to use Astro and Vue.js together to develop high-performance.1h 3m
Frequently asked questions
What are the prerequisites for enrolling in this course?
Prospective students should have a solid understanding of Vue.js fundamentals before enrolling. Familiarity with concepts such as components, slots, and basic state management is necessary, as the course dives into advanced component design and topics like render functions and encapsulating behavior.
What projects will I build during the course?
The course involves building several advanced components, including a compound sortable list component and a search select component with features like data bindings, filtering, and keyboard navigation. These projects are designed to help students understand complex component interactions and reusability in Vue.
Who is the target audience for this course?
This course is designed for developers who are already comfortable with basic Vue.js and are looking to deepen their understanding of component design. It targets those interested in mastering more advanced patterns and techniques for building scalable and maintainable applications.
What specific tools or platforms are covered in this course?
The course covers the use of Popper.js when integrating it into a search select component. Additionally, it addresses the use of render functions and renderless components, which are key features of Vue that allow for advanced component composition and behavior control.
How does the depth of this course compare to other Vue.js courses?
This course offers a deep dive into advanced component design techniques that go beyond typical Vue.js courses. It covers specialized topics such as render functions, compound components with provide/inject, and the use of controlled components, making it suitable for developers seeking to expand their expertise beyond the basics.
What is not covered in this course?
The course does not cover basic Vue.js concepts or introductory topics like state management with Vuex or Vue Router. It assumes a prior understanding of Vue.js fundamentals, focusing instead on advanced component design and behavior encapsulation.
How much time should I expect to commit to this course?
The course consists of 34 lessons. Although the exact runtime is not specified, students should allocate sufficient time for each lesson to fully understand and practice the advanced concepts presented. This includes time for hands-on exercises and experimentation with the projects discussed in the lessons.