Replies: 2 comments 1 reply
-
Hello community, I hope you are well. 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 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 |
Beta Was this translation helpful? Give feedback.
-
This is the original RFC for the current slot syntax, which (to some extent) explains why it works the way it does: The problem is nested components. e.g. Consider this: <MyPanel>
<MyHeader #header>
Some text
</MyHeader>
</MyPanel> In the example above, what does Currently, this would be interpreted as being the I believe the simplified version you're proposing would clash with that. |
Beta Was this translation helpful? Give feedback.
-
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
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:
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! 😊
Beta Was this translation helpful? Give feedback.
All reactions