eslint-plugin-vue

# vue/attributes-order

enforce order of attributes

  • ⚙️ This rule is included in "plugin:vue/vue3-recommended" and "plugin:vue/recommended".
  • 🔧 The --fix option on the command line (opens new window) 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.js Style Guide (opens new window) and is:

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

# the default order

<template> <!-- ✓ GOOD --> <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> <!-- ✗ BAD --> <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> </template>
Now loading...

Note that v-bind="object" syntax is considered to be the same as the next or previous attribute categories.

<template> <!-- ✓ GOOD (`v-bind="object"` is considered GLOBAL category) --> <MyComponent v-bind="object" id="x" v-model="x" v-bind:foo="x"> </MyComponent> <!-- ✗ BAD (`v-bind="object"` is considered UNIQUE category) --> <MyComponent key="x" v-model="x" v-bind="object"> </MyComponent> </template>
Now loading...

# 🔧 Options

{
  "vue/attributes-order": ["error", {
    "order": [
      "DEFINITION",
      "LIST_RENDERING",
      "CONDITIONALS",
      "RENDER_MODIFIERS",
      "GLOBAL",
      ["UNIQUE", "SLOT"],
      "TWO_WAY_BINDING",
      "OTHER_DIRECTIVES",
      "OTHER_ATTR",
      "EVENTS",
      "CONTENT"
    ],
    "alphabetical": false
  }]
}

# "alphabetical": true

<template> <!-- ✓ GOOD --> <div a-custom-prop="value" :another-custom-prop="value" :blue-color="false" boolean-prop class="foo" :class="bar" z-prop="Z" v-on:[c]="functionCall" @change="functionCall" v-on:click="functionCall" @input="functionCall" v-text="textContent"> </div> <!-- ✗ BAD --> <div z-prop="Z" a-prop="A"> </div> <div @input="bar" @change="foo"> </div> <div v-on:click="functionCall" v-on:[c]="functionCall"> </div> <div :z-prop="Z" :a-prop="A"> </div> <div :class="foo" class="bar"> </div> </template>
Now loading...

# Custom orders

# ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']

<template> <!-- ✓ GOOD --> <div ref="header" is="header" prop-one="prop" prop-two="prop"> </div> <!-- ✗ BAD --> <div ref="header" prop-one="prop" is="header"> </div> </template>
Now loading...

# [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']

<template> <!-- ✓ GOOD --> <div ref="header" is="header" prop-one="prop" prop-two="prop"> </div> <div is="header" ref="header" prop-one="prop" prop-two="prop"> </div> </template>
Now loading...

# 📚 Further Reading

# 🚀 Version

This rule was introduced in eslint-plugin-vue v4.3.0

# 🔍 Implementation

← vue/component-tags-order →