Press "Enter" to skip to content

Vue.js Basics Ep. 07 – Slots | V-Slot Directive

[ Vue Basics Ep. 07 ] [ Vue.js ]
# Slots | V-Slot Directive

Continuing in this series we are looking at Slots and the unified V-Slot syntax in Vue. Slots help to create and increase re-usability by implicitly generating content inside of a specified child component.

## Helpful Links

[ V-Slot in Vue.js ] –

2:37 – Session Start
3:56 – What Are Slots?
6:10 – Slots Basic Example Rundown
9:28 – Blog App Example Using Props
13:12 – Converting Our Blog App To Use Slots
19:00 – Upgrading to the V-Slot Syntax
22:16 – CSS Grid Shout Out!
22:50 – What Are Named Slots?
26:16 – Writing Our First V-Slot Syntax Slot
30:19 – Writing Another V-Slot for Content
33:33 – V-Slot Shorthand Syntax
40:25 – Summary and Catch Up
41:54 – Code Clean Up
46:30 – Session End


Project Repo:–vue-basics/tree/ep07–session-start/slots-sandbox

# RabbitWerks.js Discord

# HTML All The Things Podcast
Check out the Podcast Here!

# Check out DVLFE for all things Developer Clothing!
Save 25% on orders with coupon code RABBITWERKS


## Music from RabbitWerks CodeBeatz Spotify Playlist

Live project work. Coding in JavaScript.
Please feel free to leave a comment or suggestion in the chat!

Thank you and Enjoy!

#vuejs #tutorial #livestream #basics #javascript #beginners #vue

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
0 Comment authors
Derkarol Recent comment authors
newest oldest most voted
Notify of

Hi, good to see you back. So basically <slots> allow you to pass not only any data but complete html structures "mini-templates".