How to create more complex slots in Vue

John Au-Yeung
JavaScript in Plain English
4 min readMar 26, 2020

Photo by Matt Heaton on Unsplash

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at named and scoped slots.

Named Slots

Sometimes we want to have multiple slots. To distinguish them, then we have to name them.

We can define a component with named slots with the name attribute as follows:

Vue.component("layout", {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
});

Then we can use the component above together as follows:

src/index.js :

Vue.component("layout", {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
});
new Vue({
el: "#app"
});

index.html :

<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Responses (1)

What are your thoughts?

This is not "more complex slots". This is simple slot behaviour written in the main Vue documentation. This article is just a copy-paste from Vue documentation, and a worse version of that copy.

--