enforce order of attributes (vue/attributes-order)

⚙️ This rule is included in "plugin:vue/recommended".

📖 Rule Details

This rule aims to enfore 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'
BINDING ex: 'v-model', 'v-bind', ':property="foo"'
OTHER_ATTR ex: 'customProp="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"
  myProp="prop"
  @click="functionCall"
  v-text="textContent">
</div>

<div
  v-for="item in items"
  v-if="!visible"
  propOne="prop"
  propTwo="prop"
  propThree="prop"
  @click="functionCall"
  v-text="textContent">
</div>

<div
  propOne="prop"
  propTwo="prop"
  propThree="prop">
</div>

👎 Examples of incorrect code`:

<div
  ref="header"
  v-for="item in items"
  v-once id="uniqueID"
  v-model="headerData"
  myProp="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/attribute-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
<div
  propOne="prop"
  propTwo="prop"
  is="header">
</div>

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

👎 Examples of incorrect code with custom order`:

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!