Subscribe on changes!

Support directive shorthand with no arguments for `v-bind` and `v-slot`

avatar
ycw
Dec 20th 2021

Feature Request

Support directive shorthand with no arguments for v-bind and v-slot

End-user Experience

With this feature, syn is more coherent and succinct.

Since v-bind supports shorthand :, and argument is optional, it makes sense that := is a legal syn.

<Comp :="props" 
instead of 
<Comp v-bind="props"

Since v-slot supports shorthand #, and argument is optional, it makes sense that #= is a legal syn.

<Comp #="slotProps"
instead of
<Comp #default="slotProps"

Example code at sfc.vuejs.org

Additional Information

: and # are valid html attribute names according to https://html.spec.whatwg.org/#attributes-2

What does the proposed API look like?

App.vue

<template>
  <!-- destructing slotProps -->
  <Comp #="{ comment }">
    <b>{{ comment }}</b>
  </Comp>
</template>

Comp.vue

<script setup>
const comment = "LGTM" 
</script>

<template>
  <h1> .. </h1>
  <!-- "spread" bindings -->
  <slot :="{ comment }"></slot>
</template>
avatar
Dec 20th 2021

This was intentionally left out and discussed in the relevant RFCs

avatar
Dec 21st 2021

This was intentionally left out and discussed in the relevant RFCs

can you link those here?

avatar
ycw
Dec 21st 2021

This was intentionally left out and discussed in the relevant RFCs

@posva It would be great if you provide a link to the relevant discussion/rfcs.