Short v-bind on object

[gravitano]

Hi, great work!

I was wondering any plan for creating shorthand for v-bind?

We know that Vue had shorthand for v-bind for single prop:

<PostCard :title="title" :description="description" />

And we can also use v-bind using object:

<PostCard v-bind="{title, description}" />

Would be nice if we had shorthand for v-bind on object. Maybe something like or other format syntax is welcome:

<PostCard ...{title, description} />

Thanks!

[sxzz]

Vue Macros welcomes feature proposals. It means if you'd like, you could create a PR for it, and I'd like to accept it. But for me, I don't have too much enthusiasm for this proposal, since I don't think v-bind is a directive for frequent daily usage.

[gravitano]

Alright.

What about shorthand for single prop binding. I see this feature requested a lot in vue core repo but always rejected. Maybe this could be added via this plugin.

<PostCard :title="title" :description="description" />

Could be simplify by:

<PostCard :title :description />

Or

<PostCard ::title ::description />

Or

<PostCard $title $description />

Or svelte style:

<PostCard {title} {description} />

[sxzz]

Looks good, but I don't have enough quota for this feature. PR is welcome or I'll try to implement it in the future.

[zhiyuanzmj]

I want to create a simple-bind feature to do this:

For Template

<script setup>
const title = ref('')
</script>

<template>
  <div :title />
</template>

For Jsx

<script setup lang="tsx">
let title = ref('')

export default <div {title} />
</script> 

[sxzz]

For template, I think the syntax is acceptable. But in JSX, we already have

<div {...{ id }} />

The syntax you provide cannot even be parsed by Babel. The scope of Vue Macros is focused on Vue itself.

[sxzz]

P.S I think the name would better be shortBind

PP.S relate comment vuejs/vue#2877 (comment)

[zhiyuanzmj]

How about converting ::val to v-model:val=val ？

[sxzz]

It will conflict with shortVmodel

[sxzz]

I prefer $ sign, cuz ::= will be formatted to := when using Prettier.
https://vue-macros.sxzz.moe/macros/short-vmodel.html#known-issues

[zhiyuanzmj]

Ok, Maybe I should be compatible with shortVmodel.