eslint-plugin-vue

Appearance

On this page

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 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 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 alias for [ATTR_DYNAMIC, ATTR_STATIC, ATTR_SHORTHAND_BOOL]:
    • ATTR_DYNAMIC e.g. 'v-bind:prop="foo"', ':prop="foo"'
    • ATTR_STATIC e.g. 'prop="foo"', 'custom-prop="foo"'
    • ATTR_SHORTHAND_BOOL e.g. 'boolean-prop'
  • EVENTS e.g. '@click="functionCall"', 'v-on="event"'
  • CONTENT e.g. 'v-text', 'v-html'

the default order ​

Now loading...

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

Now loading...

🔧 Options ​

json
{
  "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 ​

Now loading...

Custom orders ​

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

Now loading...

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

Now loading...

📚 Further Reading ​

🚀 Version ​

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

🔍 Implementation ​