Vue Slots Tutorial
Say hi to the first Vue tidbit 👋 It’s about time I start covering Vue in my code tidbits, right 😉
About the course In this course, you'll learn how to use slots and scoped slots to create flexible and reusable Vue.js components. Slots allow us to pass components and HTML to components, giving us greater control of the appearance than what we get with props. Slots do not replace props. See the Pen Vue Components – Slots by SitePoint on CodePen. I hope you’ve found the tutorial useful. Kingsley Silas is a web developer from Nigeria. He has a hunger for. In this tutorial, we are going to learn how to build a customizable and pageable data table in Vue application using the Vuetify plugin. We will also look at how to add data sorting and filtering feature very easily in Vue.js 2+. What is Data Table? A table is a classification of data in rows.
Use the new named slot shorthand with '#'. This is available now in Vue 2.6.0+ 👍
This tutorial is designed for software programmers who want to learn the basics of VueJS and its programming concepts in a simple and easy manner. This tutorial will give the readers enough understanding on the various functionalities of VueJS from where they can take themselves to.
- How My Site Is Using Slots
Vue, hands down, have the BEST documentation EVER! So I'm not going to try to compete with that. Just like how I'd never have the audacity to compete with Serena Williams to a tennis match. Even though I have a pretty mean serve 🎾 (just kidding, I can barley hit the ball 😂).
Instead, I'm going to talk about how I use slots on my site, samanthaming.com 🙋🏻♀️
Note: This article does assume some basic knowledge of Vue. So if you're a complete newbie to Vue, I'd suggest you check out the Vue docs first:
Vue Docs: Introduction
Vue Docs: Components Basics
# What are slots
I like to think of slots as templates. Think of how you create your resume, you don't typically start from an empty document. You will open up Google Docs and find a resume template and build from that. And that's exactly what slots are. It's a template that allow you quickly to fill in the blanks without having to start from scratch. Super efficient 👏
# Components vs Slots explained in Non-Dev Terms
When I first started learning slots, I was super confused. I kept thinking slot was some separate thing. But slot is not. It is a Vue component that has an additional slot functionality to it. It's a component with super power. It's a component that's organized.
Hmmm...I don't think I'm getting anywhere with my explanation and you're probably more confused than you were before 😂 Let's explain it in non-dev terms.
Think of a component as your kitchen drawer. It's an open space storage. But the problem with open space, it can get messy really quick:
A great way to organize your tools is to use dividers which allows to sort your tools into separate section. And that's exactly what slots are. It helps you organize your content into nice sections 👍
Image Credit: homedit
Isn't it much better! Super Marie Kondo if you ask me ✨
# How My Site Is Using Slots
My entire site is built on slots. The prime example is my article pages. These are what I call article pages:
If you visit those sites, you will notice they all look quite similar. That's because they're all using a slot. So let's go through step-by-step on how I build this.
Note: I'm going to simplify it a bit that way it will be easier for you to follow. Alright let's go! 💪
# 1. The Layout
When you build the slot, it's a good idea to plan out your layout. And this what my article layout looks like.
Vue Slots Tutorial App
So in my layout, I have 5 slots:
article-headerarticle-contentarticle-footersidebanner
# 2. Build the slot
Building a slot is no different than building a component. Essentially, slot is a component with super power. Here's how the component looks like:
# 3. Consume the slot
Alright, we made our slots. Next, let's stick some stuff in it.
So let's breakdown what we're doing here. The first thing we're doing is calling our article-layout component. Then I'm inserting content to my slot by wrapping it in a <template> tag and referencing the slot name with #. And inside the <template> is where I insert my content.
# 4. Final
Putting it altogether, it'd look something like this:
# Resources
Learn how to master slots and scoped slots, to build flexible and reusable vue.js components.
Follow the course to get an email notification when a new lesson is published.
- 7 of 10 lessons
- 30 min
- Advanced
About the course
In this course, you'll learn how to use slots and scoped slots to create flexible and reusable Vue.js components.
Slots allow us to pass components and HTML to components, giving us greater control of the appearance than what we get with props.
Slots do not replace props. The two features have different purposes.
During the course, you'll learn:
- When and how to use slots
- What scoped slots are
- How to work with dynamic named components
- How to compose components with reusable component patterns
Slots
Scoped Slots
Vue V-slot Tutorial
What you will learn
- What are slots and scoped Slots
- What are the benefits of using slots
- How to compose components with slots
Share this course
Who's behind the course
Aleksej Dix - TeacherAleksej is an eager front-end developer who loves to share his knowledge through teaching, public speaking, and organizing meetups and conferences in Switzerland.
Rolf Haug - Contributor / ReviewerRolf has been in development industry for 16 years. Long-time entrepreneur and consultant currently working on educational content and workshops.
Alex Kyriakidis - Contributor / ReviewerAlex is an educator and consultant, core member of the Vue.js team and author of the first best-selling books on Vue.js.