Shorthand attributes/props

[roonie007]

What problem does this feature solve?

Having an attribute where the name and value are the same is common case in many of the projects I have worked on.
You find yourself rewriting the same word twice in many components.

Example

my-component.vue

<template>
  <a :id="id" :href="href"> {{title}} </a>
</template>

<script lang="ts" setup>
defineProps({
  id: String;
  title: String;
  href: String;
});
</script>

App.vue

<template>
  <my-component :id="id" :title="title" :href="href" />
</template>

<script lang="ts" setup>
  const id = 'my-id';
  const title= 'my-title';
  const href = 'http://my-link.com';
</script>

What does the proposed API look like?

As you can see in the following example, it's cleaner and easier to read when attribute names aren't repeated twice.

my-component.vue

<template>
  <a :id :href> {{title}} </a>
</template>

<script lang="ts" setup>
defineProps({
  id: String;
  title: String;
  href: String;
});
</script>

App.vue

<template>
  <my-component :id :title :href />
</template>

<script lang="ts" setup>
  const id = 'my-id';
  const title= 'my-title';
  const href = 'http://my-link.com';
</script>

[roonie007]

Duplicated vuejs/vue#2877 and looks like @yyx990803 is not a big fan of it vuejs/vue#2877 (comment).

But having personally tried it with Svelte, it's a very useful feature https://svelte.dev/tutorial/dynamic-attributes