- ⚙️ 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.
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'
- 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>
Specify custom order of attribute groups
👍 Examples of correct code with custom order`:
<!-- 'vue/attributes-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/attributes-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/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'DEFINITION', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
<div
ref="header"
propOne="prop"
is="header">
</div>