Slots Vuejs

You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

> This page assumes you’ve already read the Components Basics. Read that first if you are new to components.

> In 2.6.0, we introduced a new unified syntax (the v-slot directive) for named and scoped slots. It replaces the slot and slot-scope attributes, which are now deprecated, but have not been removed and are still documented here. The rationale for introducing the new syntax is described in this RFC.

Slot Content
Vue implements a content distribution API inspired by the Web Components spec draft, using the element to serve as distribution outlets for content.

This allows you to compose components like this:

Your Profile

Then in the template for , you might have:


When the component renders, will be replaced by “Your Profile”. Slots can contain any template code, including HTML:

Your Profile

Or even other components:

Your Profile

If ‘s template did not contain a element, any content provided between its opening and closing tag would be discarded.

Compilation Scope
When you want to use data inside a slot, such as in:

Logged in as {{ }}

That slot has access to the same instance properties (i.e. the same “scope”) as the rest of the template. The slot does not have access to ‘s scope. For example, trying to access url would not work:

Clicking here will send you to: {{ url }}


As a rule, remember that:

> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.

Fallback Content
There are cases when it’s useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided. For example, in a component: