Skip to main content

Reusable Components

4h 10m 42s
English
Paid

Course description

Master the art of writing highly reusable Vue — and make the most of your components. Reusable Components is all about how to make your components more flexible and reusable, saving you time and effort and helping you to get more done with less code.

Read more about the course

You'll go through in-depth lessons that cover the 6 Levels of Reusability, a framework for thinking about and understanding reusability in Vue.

It's a full-length video course covering:

  • Best practices for using props — and what to do when there are too many
  • Leveraging slots in unique ways to maximize flexibility without the headaches
  • The tradeoffs between different patterns, how to use them, and why they work

Reusability is not just for component libraries

When you think of "reusability", you probably think of component libraries — a collection of components like buttons and sliders and checkboxes, that will be used dozens or hundreds of times throughout a single application.

But reusability is also important for the more custom made components in your application.

Reusing a component even two or three times saves a lot of effort and makes you more effective.

Plus, once you understand reusability more deeply you'll start to see opportunities for applying it all over your codebase.

This course isn't like any other course.

Most courses teach you syntax and how the API works. Things that you can probably learn on your own by reading the docs (if you have the time for that).

This course focuses on teaching you insights.

On getting you to think differently about your code, and understand how it works in a totally new way.

I spent months developing a framework for thinking about reusability in Vue

I drew on my years of experience building highly reusable components and component libraries, and came up with the 6 Levels of Reusability that this course is based on.

This framework is necessary for understanding reusability deeply. It gives us a way to talk about these concepts in a very organized and detailed way.

But these aren't laws of the universe.

I invented this framework in order to teach reusability to you. Perhaps there is a 7th level that I missed?

No fluff, no filler. Only what you need to master reusability

I hate wasting your time.

So I spent months agonizing over the outline, reworking it over and over again to make sure it only included what was absolutely necessary for you to master reusability.

In fact, I started to record the first few videos of this course, only to realize it wasn't good enough yet. So I went back again, reworking the course and how it flowed to make sure it was as good as it could be.

Watch Online

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

Watch Online Reusable Components

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Vue 3, Nuxt.js and Laravel: A Practical Guide

Vue 3, Nuxt.js and Laravel: A Practical Guide

Sources: udemy
Learn 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 I
10 hours 17 minutes 9 seconds
Course: Large Scale Apps with Vue, Vite and TypeScript

Course: Large Scale Apps with Vue, Vite and TypeScript

Sources: Damiano Fusco
This course will teach you how to create scalable and maintainable frontends using Vue, employing modern approaches and best practices. You will learn how to...
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

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

Sources: udemy
No matter at which Metric you look at (Google Trends, Github Stars, Tweets ...) VueJS is the Shooting Star in the World of JavaScript Frameworks - it simply is
19 hours 57 minutes 29 seconds