# vue/prefer-prop-type-boolean-first
enforce
Booleancomes first in component prop types
- 💡 Some problems reported by this rule are manually fixable by editor suggestions (opens new window).
# 📖 Rule Details
When declaring types of a property in component, we can use array style to accept multiple types.
When using components in template,
we can use shorthand-style property if its value is true.
However, if a property allows Boolean or String and we use it with shorthand form in somewhere else,
different types order can introduce different behaviors:
If Boolean comes first, it will be true; if String comes first, it will be "" (empty string).
See this demo (opens new window).
<script>
export default {
props: {
// ✓ GOOD
a: Boolean,
b: String,
c: [Boolean, String],
d: {
type: [Boolean, String]
},
// ✗ BAD
e: [String, Boolean],
f: {
type: [String, Boolean]
}
}
}
</script>
# 👫 Related Rules
# 🚀 Version
This rule was introduced in eslint-plugin-vue v8.6.0