CF

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.

Additional

https://github.com/tesla3327/reusable-components-examples

About the Author: Michael Thiessen

Michael Thiessen thumbnail

Michael Thiessen is a Vue.js and Nuxt specialist, Vue Mastery instructor, and the publisher of the Tips From a Vue Dev newsletter. He is co-author of Mastering Nuxt with Daniel Kelly and has been one of the most consistent voices on practical Vue patterns since the Vue 3 era.

His CourseFlix listing carries Mastering Nuxt, 2025 Edition, the Nuxt Tips Collection, and Reusable Components. Material is paid and aimed at working Vue developers who already understand the framework basics and want depth on the patterns that recur in real applications.

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

Related courses

Frequently asked questions

What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a solid understanding of Vue.js basics, including component structure, props, and slots. Familiarity with JavaScript and web development concepts will help you grasp the reusability techniques covered in the lessons. The course assumes knowledge of Vue, so beginners might find it challenging without prior experience.
What is the main focus of the projects built in this course?
The course focuses on building highly reusable Vue components, emphasizing the 6 Levels of Reusability. You'll work on custom-made components rather than typical component libraries, like buttons or sliders. The projects aim to enhance flexibility and efficiency in your development process by applying patterns such as the Templating Pattern, Configuration Pattern, and Adaptability Pattern.
Who is the target audience for this course?
This course is designed for Vue developers looking to deepen their understanding of component reusability. If you're a developer who wants to write more efficient code and reduce development time through reusable components, this course will be valuable. Advanced beginners to intermediate developers will benefit the most from the course content.
How does this course differ in depth compared to similar courses?
Unlike other courses that focus on Vue syntax or API usage, this course provides a framework for understanding and implementing reusability through the 6 Levels of Reusability. It goes beyond documentation by offering insights into coding patterns, trade-offs, and practical applications, making it unique for developers interested in improving their component architecture.
What specific Vue tooling or platforms are covered in the course?
The course covers various Vue component patterns and techniques, such as Scoped Slots, Extension Points, and the Base Component Pattern. It does not focus on external libraries or frameworks but rather on the intrinsic capabilities of Vue to enhance reusability within your applications.
What topics are not covered in this course?
The course does not cover basic Vue syntax or beginner-level concepts. It also does not delve into external library integrations or advanced state management techniques like Vuex. The focus remains on reusability patterns and practices within Vue itself.
How much time should I expect to commit to this course?
The course consists of 36 lessons, with a total runtime designed to fit into a full-length video course. While the exact duration isn't specified, you should allocate enough time to digest the material, practice the patterns, and integrate the concepts into your projects. It's recommended to pace the lessons over several weeks for maximum comprehension and application.