VuePress implements a content distribution API for Markdown. With this feature, you can split your document into fragments, allowing flexible composition in the layout component.

The slots syntax has been changed in Vue 2.6, the following examples use the new v-slot syntax instead of the deprecated slot-scope, but it is still supported and you can use it. However v-slot have different semantics, consult the Vue docs for more information. Create a component that initializes our map. In the template, we create a container for the map.

# Why do I need Markdown Slot?

First, let’s review the relationship between layout components and Markdown files:

Markdown files are providers of metadata (page content, configuration, etc.), while layout components consume them. We can use frontmatter to define some metadata for common data types, but frontmatter is hard to do something about Markdown / HTML, a complex metadata that involves differences before and after compilation.

Markdown Slots solve this problem.

# Named Slots

You can define a named Markdown slot through the following Markdown syntax:

Use the Content component to use the slot in the layout component:

TIP

Here we are using slot-key instead of slot, because in Vue, slot is a reserved prop name.

# Default Slot Content

By default, the slot-free part of a Markdown file becomes the default content of a Markdown slot. You can access this directly using the Content component:

# Example

Suppose your layout component is as follows:

If the Markdown content of a page is this:

Then the rendered HTML of this page will be:

Note that:

1. Unlike the slot mechanism provided by Vue(opens new window) itself, each content distribution is wrapped in a div whose class is content with the name of the slot.
2. You need to ensure the uniqueness of the slot defined.

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 Scope Slot

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 - Teacher

Aleksej 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 / Reviewer

Vue Slot Props Games

Rolf has been in development industry for 16 years. Long-time entrepreneur and consultant currently working on educational content and workshops.

Alex Kyriakidis - Contributor / Reviewer

Vue Slot Props Example

Alex is an educator and consultant, core member of the Vue.js team and author of the first best-selling books on Vue.js.