New shorthand: !prop -> :prop="false"

[KazariEX]

Linked issues: vuejs/vue#8549

Summary

This RFC proposes a shorthand syntax for binding variables with false value.

Base example

<template>
  <Comp !foo />
</template>

Motivation

For props without values, we have already implicitly set its value to true. For components, the default value of an optional boolean property is false, this way of writing can concisely enable the property. However, in actual application scenarios, it is difficult for us to design a set of boolean properties with all default values set to false for a component. For the code simplicity, it is common for properties with default values of either false or true to coexist. With this shorthand, we gain the ability to quickly set a property to either true or false.

Detailed design

In contrast to prop -> :prop="true", !prop -> :prop="false".

<template>
  <!-- from -->
  <Comp !foo />
</template>

<template>
  <!-- to -->
  <Comp :foo="false" />
</template>

Drawbacks

• We may increase the Vue bundle size slightly due to the addition of the new syntax

Alternatives

• Vue Macros: https://vue-macros.dev/features/boolean-prop.html

Adoption strategy

Unresolved questions

[fgt1t5y]

支持

[haoqunjiang]

For components, the default value of an optional boolean property is false, this way of writing can concisely enable the property. However, in actual application scenarios, it is difficult for us to design a set of boolean properties with all default values set to false for a component.

More on this part:

Why :prop="false" is a valid (and common) use case

Defaulting boolean props to false aligns with the native HTML behavior; that's why we've always recommended developers design their component APIs this way and consider defaulting to true an anti-pattern. That’s also why I was initially against adding this syntax: we want to make it harder for users to write code that follows anti-patterns.

To enforce this best practice, we have an ESLint rule: vue/no-boolean-default.

But in practice, we've run into problems:

• The ESLint rule isn't categorized as essential or even recommended; as a result, few people use it, and "bad" practices are common in the wild.
• It’s not always easy to design APIs that default to false. Sometimes it’s hard to find natural antonyms, and sometimes the negated term feels awkward. The fitContent prop in PrimeVue's Tooltip component is a good example. There are also numerous similar examples in other popular libraries, including Nuxt UI, Quasar, Vuetify, and more.

Why a shortcut syntax is necessary

So, consider:

• It's already a commonly used pattern;
• Even popular libraries expose many APIs that behave this way.

The practical way for us to improve developer experience isn't to create more friction for users writing this kind of code, but to make it easier to consume and only discourage it when truly necessary (e.g. when the component will be turned into a custom element).

Why this shortcut

We already have a few shorthand syntaxes for v-bind:

• :prop same-name shorthand (<img :src />)
• .prop for .prop modifier (<div .someProperty="someObject"></div>)
• ^prop for .attr modifier (undocumented, added in vuejs/core@1c7d737)

!prop feels a natural extension to these shorthands.

It’s also already implemented in vue-macros, so it has real-world usage and user feedback to draw from.

[Rusinas]

I literally came here to suggest this feature lol. Been thinking about it for a while