Understanding Default Behavior of Optional Boolean Props for Vue 4

[stephenjason89]

In Vue 3, when declaring an optional boolean prop using defineProps with TypeScript syntax (e.g., { isVisible?: boolean }), the prop defaults to false if it’s not provided by the parent component. This behavior contrasts with typical TypeScript expectations, where optional properties default to undefined, which helps developers distinguish between an unset value and an explicit false.

Purpose of this Poll

This poll seeks feedback from the Vue community on whether optional boolean props should default to false or undefined. By gathering community preferences and understanding any challenges this default behavior may present, we can evaluate whether there is strong support for a recommendation to the Vue team to consider changes.

Approach

To address this, the project will:

• Explore workarounds: Investigate possible solutions like explicitly setting the prop default to undefined or using nullable types.
• Evaluate implications: Consider the impact of each approach on code consistency, flexibility, and developer experience.

Goal

The ultimate goal of this POL is to contribute to a discussion on best practices for handling optional boolean props. By aligning with community expectations, we hope to enhance consistency and flexibility in Vue 3 components and potentially influence future updates in the Vue framework.

[Justineo]

I think there's another option that we don't provide false as default value only when declaring props with type-style defineProps but keep the old behavior for value-based declarations.

[stephenjason89]

I think there's another option that we don't provide false as default value only when declaring props with type-style defineProps but keep the old behavior for value-based declarations.

I see the benefits of this approach, particularly in its backward compatibility. Allowing type-style defineProps to default to undefined while keeping false for value-based declarations would mean existing codebases could continue functioning without any changes, which is definitely a plus.

That said, I do feel it introduces some inconsistency. Having different default behaviors between type-style defineProps and value-based declarations could lead to confusion, especially for developers switching between both styles within the same project. This difference could also introduce subtle bugs if someone assumes a uniform default behavior across both methods.

I’m okay with this approach, but for consistency, defaulting to undefined across both type-style and value-based declarations would be much preferable. Vue’s simplicity is one of its strengths, so having a single, consistent default would likely make the framework easier to reason about, particularly in larger projects. I’d be curious to hear if others think there’s a way to balance backward compatibility with consistency in a way that benefits everyone.

[stephenjason89]

I've updated the poll to incorporate @Justineo's comment.

Please feel free to recast your votes, as this update has reset the poll. Thank you!

[jacekkarczmarczyk]

I think you should change "Vue 3" to "Vue 4" there, as even if someone decides to modify the behaviour it would be a big breaking change so it won't happen in Vue 3 anyway

[stephenjason89]

I think you should change "Vue 3" to "Vue 4" there, as even if someone decides to modify the behaviour it would be a big breaking change so it won't happen in Vue 3 anyway

That's a good point. Will change it now.