Simplifying Named Slots Syntax for Better Readability

[Navidtm]

Hello friends!
I came up with an idea that could make the code for named slots in Vue simpler and cleaner. I wanted to post it here to get your feedback and see if it's possible to add this idea to Vue.

Current syntax

<BaseLayout>
  <template #header>
    <h1>header title</h1>
  </template>

  <p>A paragraph</p>
  <p>And another one.</p>

  <template #footer>
    <p>content</p>
  </template>
</BaseLayout>

This syntax is good, but it can seem a bit too complicated. Especially those tags that are everywhere can clutter up the code.

My suggestion

I thought, why not simplify the syntax? For example, like this:

<BaseLayout>
  <h1 #header>header title</h1>

  <p>A paragraph</p>
  <p>And another one.</p>

  <p #footer>content</p>
</BaseLayout>

Here I removed the tags and put the slot names directly on the tags. I think this way is cleaner and easier to read. 🤔

I'd love to hear your thoughts, and if you have any suggestions or if my idea needs improvement, please let me know. Thank you for taking the time! 😊

[lenin-developer]

Hello community, I hope you are well.
I share my opinion regarding this proposal.
I clarify that I am using a translator to be able to share my idea.

I had the same idea, but with a directive. The syntax is more or less this.

<BaseLayout>
  <h1 v-template:header>header title</h1>

  <p>A paragraph</p>
  <p>And another one.</p>

  <p v-template:footer="myProps">content</p>
</BaseLayout>

I tried to make my custom directives without success. 😅

Although it is important to mention that the <template> tag and the <slot>, as well as their ideology in their use, are not something specific to Vue; this is part of the standard.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots

So I think Vue is trying to keep the syntax as close to the standard as possible. 😊

But like you, I also recognize that there can be an improvement in the syntax.

I like your proposal better, it's cleaner

[Navidtm]

Hello,

Thank you for sharing your idea about using a directive like v-template! I think it's a fantastic approach to simplify slot usage while keeping the syntax clean.

I tried to implement the directive in Vue 3, but unfortunately, I couldn't get it to work as expected. It seems there are some challenges in correctly rendering the slot content and integrating it into the DOM dynamically through a directive.

If you have any further thoughts or suggestions on how to make it work, I’d love to hear them!

[skirtles-code]

This is the original RFC for the current slot syntax, which (to some extent) explains why it works the way it does:

• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md

The problem is nested components. e.g. Consider this:

<MyPanel>
  <MyHeader #header>
    Some text
  </MyHeader>
</MyPanel>

In the example above, what does #header mean? Is it the header slot of the MyPanel component or the MyHeader component?

Currently, this would be interpreted as being the header slot of MyHeader:

• Playground

I believe the simplified version you're proposing would clash with that.