Skip to main content

Reusable Components

4h 10m 42s
English
Paid

Master the art of writing highly reusable Vue components and make the most of your development process. The Reusable Components course is designed to help you make your components more flexible and efficient, allowing you to achieve more with less code. Save time and effort by enhancing your component reusability skills.

Course Overview

Dive deep into the 6 Levels of Reusability, a comprehensive framework for understanding and implementing reusability in Vue. This full-length video course covers:

  • Best practices for using props — learn what to do when you encounter an excess of them
  • Utilize slots in unique ways to maximize flexibility without added complexity
  • Understand the trade-offs between different patterns, their applications, and effectiveness

Beyond Component Libraries

Reusability is not limited to component libraries. While you might initially think of component libraries such as buttons, sliders, and checkboxes as the main areas for reusability, this concept is equally important for custom-made components in your application. Reusing components, even just two or three times, significantly reduces effort and increases efficiency. As you deepen your understanding of reusability, you'll begin to identify more opportunities throughout your codebase.

Course Uniqueness

This course is unlike any other. While many courses focus on syntax and API usage—knowledge you could acquire independently through documentation—this course provides insights into coding. It aims to transform your perspective on your code and enhance your understanding in a completely new way.

Framework Development

Months of development went into creating a reusability framework for Vue. Drawing on extensive experience in building reusable components and libraries, I developed the 6 Levels of Reusability, which is the foundation of this course. This framework organizes and details concepts crucial to deep understanding, though it is not exhaustive or definitive. Perhaps a 7th level remains undiscovered?

Focused and Efficient Learning

No fluff, no filler—only essential content to master reusability. I am committed to respecting your time. Therefore, I meticulously crafted this course outline, ensuring it includes only the necessary material for mastering reusability. During the recording process, I continuously refined the course to ensure its quality and effectiveness, leading to the optimized course structure you see now.

About the Author: Michael Thiessen

Michael Thiessen thumbnail
I am Michael Thiessen and I write the most popular Vue blog that has been read over 1 million times.

Watch Online 36 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 36 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Intro to Reusable Components
All Course Lessons (36)
#Lesson TitleDurationAccess
1
Intro to Reusable Components Demo
05:00
2
What is Reusability?
09:04
3
Why Reusability is Important
03:14
4
The 6 Levels of Reusability
15:04
5
Templating Pattern
07:40
6
Rule of Three
04:42
7
Dealing with Large Components
03:53
8
Configuration Pattern
06:03
9
When to use Configuration
03:49
10
Prop Explosions
02:43
11
Tearing Everything Apart
06:27
12
Base Component Pattern
09:15
13
Adaptability Pattern
07:01
14
When to use Adaptability
01:52
15
Markup as a First-Class Data Type
03:17
16
Planning for Flexibility
06:45
17
Template Props
03:12
18
Understanding Slots
08:06
19
Inversion and Data (Part 1)
13:36
20
Inversion and Data (Part 2)
07:12
21
Inversion and Data (Part 3)
05:43
22
When to use Inversion
08:29
23
Inversion and Actions
13:28
24
Keeping Things Clean and Tidy
06:36
25
Understanding Scoped Slots
09:02
26
Why are Scoped Slots Upside Down?
07:08
27
Providing a Good Default Experience
05:43
28
Intro to Extension Points
05:20
29
Extension Points (Part 1)
09:09
30
Extension Points (Part 2)
06:32
31
A Note on App Architecture
03:53
32
Extension Points (Part 3)
10:17
33
When to use Extension
05:56
34
Nesting Extension Points Through Component Trees
10:59
35
Default Content at Every Level
07:00
36
When to use Nesting
07:32
Unlock unlimited learning

Get instant access to all 35 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription