prefer-prop-type-boolean-first.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/prefer-prop-type-boolean-first	enforce `Boolean` comes first in component prop types	v8.6.0

vue/prefer-prop-type-boolean-first

enforce Boolean comes first in component prop types

• 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 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.

<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

• vue/prefer-true-attribute-shorthand

🚀 Version

This rule was introduced in eslint-plugin-vue v8.6.0

🔍 Implementation

• Rule source
• Test source