Reusable Components

4h 10m 42s
English
Paid

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 Reusable Components

Join premium to watch
Go to premium
# Title Duration
1 Intro to Reusable Components 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

Similar courses to Reusable Components

Advanced Vue Component Design

Advanced Vue Component Designadamwathan

Category: Vue
Duration 3 hours 57 minutes 19 seconds
Ethereum and Solidity: Build Dapp with VueJS

Ethereum and Solidity: Build Dapp with VueJSudemy

Category: Decentralized Applications (dApps) / 'Web 3', Vue
Duration 1 hour 45 minutes 9 seconds
AI Chat Bot with Vue.js and GPT-4

AI Chat Bot with Vue.js and GPT-4vueschool.io

Category: ChatGPT, Vue
Duration 1 hour 46 minutes 30 seconds
Learn Laravel Vuejs from scratch - Build a TESLA web app

Learn Laravel Vuejs from scratch - Build a TESLA web appudemy

Category: Vue, Laravel
Duration 6 hours 48 minutes 12 seconds
Real-time chat with Node.js, Socket.io and Vue.js

Real-time chat with Node.js, Socket.io and Vue.jsCodecourse

Category: Node.js, Vue, Socket.IO
Duration 26 minutes 39 seconds
Full Stack Isomorphic JavaScript with Vue.js & Node.js

Full Stack Isomorphic JavaScript with Vue.js & Node.jsudemy

Category: JavaScript, Node.js, Vue
Duration 5 hours 33 minutes 49 seconds
Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)zerotomastery.io

Category: Vue
Duration 27 hours 56 minutes 34 seconds