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

Build an Image Filters App with Vue, TypeScript and WebAssembly

Build an Image Filters App with Vue, TypeScript and WebAssembly

Sources: zerotomastery.io
With this project you'll build "Vue Filters", an image filter application built with Vue that allows you to bring the experience of applying Photoshop filters t
1 hour 44 minutes 19 seconds
The Nuxt 3 Bootcamp The Complete Developer Guide

The Nuxt 3 Bootcamp The Complete Developer Guide

Sources: udemy
This is the most comprehensive Nuxt 3 course on the market. You will learn many of Nuxt's incredible features all while build six real world projects. With each
16 hours 52 minutes 7 seconds
Master Laravel, Vue 3 & Inertia Full Stack 2023

Master Laravel, Vue 3 & Inertia Full Stack 2023

Sources: udemy
Learn Laravel together with Vue.js in this brand new, full-stack, project based course! Learn how to create a robust API in Laravel and a Single Page Application frontend in Vue...
35 hours 53 minutes 40 seconds
AI Chat Bot with Vue.js and GPT-4

AI Chat Bot with Vue.js and GPT-4

Sources: vueschool.io
AI is a powerful tool of the future. With Open AI's Chat Completions API (GPT-3.5 Turbo and GPT-4), adopting it in your applications is as easy as a REST reques
1 hour 46 minutes 30 seconds
Vue 3, Nuxt.js and NestJS: A Rapid Guide - Advanced

Vue 3, Nuxt.js and NestJS: A Rapid Guide - Advanced

Sources: udemy
Learn how to create an Ambassador App using Vue 3, NuxtJS and NestJS. We will build 3 frontend apps Admin, Ambassador and Checkout and they will consume a big N
7 hours 37 minutes 36 seconds