vuejs / vuejs/docs

Using named slots directly on the component

Open
#2,190 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Vue
Stars
3.2k
Forks
5k
Avg merge
14d 17h
Merged PRs (30d)
1

Description

There are a few places in the docs where we imply or state that you can only use v-slot directly on the component tag for the default slot. So, for example, this isn't allowed:

<MyComponent #header>
  Header content
</MyComponent>

Following the docs, this should be written using a <template> tag instead:

<MyComponent>
  <template #header>
    Header content
  </template>
</MyComponent>

But, in practice, this first example does seem to work.

I'm unclear whether this is intentional or not.


The Vue 2 docs are really explicit about this, https://v2.vuejs.org/v2/guide/components-slots.html:

Note that v-slot can only be added to a <template> (with one exception), unlike the deprecated slot attribute.

The Vue 3 guide isn't quite so explicit, but the slots guide gives no indication that this is supported. In the API reference it copies the wording from the Vue 2 docs:

Limited to [...] components (for a lone default slot with props)

The RFC, https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md, doesn't tackle this directly, but it does strongly imply that only the default slot can be used this way:

v-slot can be used directly on a component, without an argument, to indicate that the component's default slot is a scoped slot

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Vue 3 slots guide and API reference, then compare their wording with the Vue 2 guide and the linked slot-syntax RFC. Confirm whether named slots directly on a component are supported, and document the intended syntax and examples consistently once the behavior is established.

Written by the indexing model from the issue text.

Assessment

Domain
documentation
Issue type
Documentation
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.