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

# vue/prefer-prop-type-boolean-first

> enforce `Boolean` comes first in component prop types

- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).

## :book: 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](https://sfc.vuejs.org/# ).

<eslint-code-block :rules="{'vue/prefer-prop-type-boolean-first': ['error']}">

```vue
<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>
```

</eslint-code-block>

## :couple: Related Rules

- [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md)

## :rocket: Version

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

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-prop-type-boolean-first.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-prop-type-boolean-first.js)
