---
pageClass: rule-details
sidebarDepth: 0
title: vue/prefer-true-attribute-shorthand
description: require shorthand form attribute when `v-bind` value is `true`
since: v8.5.0
---

# vue/prefer-true-attribute-shorthand

> require shorthand form attribute when `v-bind` value is `true`

- :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

`v-bind` attribute with `true` value usually can be written in shorthand form. This can reduce verbosity.

<eslint-code-block :rules="{'vue/prefer-true-attribute-shorthand': ['error']}">

```vue
<template>
  <!-- ✗ BAD -->
  <MyComponent v-bind:show="true" />
  <MyComponent :show="true" />

  <!-- ✓ GOOD -->
  <MyComponent show />
  <MyComponent another-prop="true" />
</template>
```

</eslint-code-block>

::: warning Warning
The shorthand form is not always equivalent! If a prop accepts multiple types, but Boolean is not the first one, a shorthand prop won't pass `true`.
:::

```vue
<script>
export default {
  name: 'MyComponent',
  props: {
    bool: Boolean,
    boolOrString: [Boolean, String],
    stringOrBool: [String, Boolean],
  }
}
</script>
```

**Shorthand form:**

```vue
<MyComponent bool bool-or-string string-or-bool />
```

```txt
bool: true (boolean)
boolOrString: true (boolean)
stringOrBool: "" (string)
```

**Longhand form:**

```vue
<MyComponent :bool="true" :bool-or-string="true" :string-or-bool="true" />
```

```txt
bool: true (boolean)
boolOrString: true (boolean)
stringOrBool: true (boolean)
```

Those two calls will introduce different render result. See [this demo](https://sfc.vuejs.org/# ).

## :wrench: Options

Default options is `"always"`.

```json
{
  "vue/prefer-true-attribute-shorthand": ["error", "always" | "never"]
}
```

- `"always"` (default) ... requires shorthand form.
- `"never"` ... requires long form.

### `"never"`

<eslint-code-block :rules="{'vue/prefer-true-attribute-shorthand': ['error', 'never']}">

```vue
<template>
  <!-- ✗ BAD -->
  <MyComponent show />

  <!-- ✓ GOOD -->
  <MyComponent :show="true" />
  <MyComponent v-bind:show="true" />
</template>
```

</eslint-code-block>

## :couple: Related Rules

- [vue/no-boolean-default](./no-boolean-default.md)
- [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md)

## :rocket: Version

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

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-true-attribute-shorthand.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-true-attribute-shorthand.js)
