Skip to content
On this page


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'
    • 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

  "vue/attributes-order": ["error", {
    "order": [
      ["UNIQUE", "SLOT"],
    "alphabetical": false

"alphabetical": true

Now loading...

Custom orders


Now loading...


Now loading...

📚 Further Reading

🚀 Version

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

🔍 Implementation