Support directive shorthand with no arguments for `v-bind` and `v-slot`
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"
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>