enforce order of attributes (vue/attributes-order)

⚙️ This rule is included in "plugin:vue/recommended".
🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

📖 Rule Details

This rule aims to enforce ordering of component attributes. The default order is specified in the Vue styleguide and is:

DEFINITION ex: 'is'
LIST_RENDERING ex: 'v-for item in items'
CONDITIONALS ex: 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
RENDER_MODIFIERS ex: 'v-once', 'v-pre'
GLOBAL ex: 'id'
UNIQUE ex: 'ref', 'key', 'slot'
TWO_WAY_BINDING ex: 'v-model'
OTHER_DIRECTIVES ex: 'v-custom-directive'
OTHER_ATTR ex: 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"'
EVENTS ex: '@click="functionCall"', 'v-on="event"'
CONTENT ex: 'v-text', 'v-html'

👍 Examples of correct code`:

<div
  is="header"
  v-for="item in items"
  v-if="!visible"
  v-once
  id="uniqueID"
  ref="header"
  v-model="headerData"
  my-prop="prop"
  @click="functionCall"
  v-text="textContent">
</div>

<div
  v-for="item in items"
  v-if="!visible"
  prop-one="prop"
  :prop-two="prop"
  prop-three="prop"
  @click="functionCall"
  v-text="textContent">
</div>

<div
  prop-one="prop"
  :prop-two="prop"
  prop-three="prop">
</div>

👎 Examples of incorrect code`:

<div
  ref="header"
  v-for="item in items"
  v-once
  id="uniqueID"
  v-model="headerData"
  my-prop="prop"
  v-if="!visible"
  is="header"
  @click="functionCall"
  v-text="textContent">
</div>

`order`

Specify custom order of attribute groups

👍 Examples of correct code with custom order`:

<!-- 'vue/attributes-order': [2, { order: ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', ['BINDING', 'OTHER_ATTR'], 'EVENTS', 'CONTENT'] }] -->
<div
  is="header"
  prop-one="prop"
  :prop-two="prop">
</div>

<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
<div
  prop-one="prop"
  prop-two="prop"
  is="header">
</div>

<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
<div
  ref="header"
  is="header"
  prop-one="prop"
  prop-two="prop">
</div>

👎 Examples of incorrect code with custom order`:

<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
<div
  ref="header"
  prop-one="prop"
  is="header">
</div>

Related links

Style guide - Element attribute order