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! 😊