Skip to content

vue/attributes-order: add option to ignore v-bind="object" (attribute spread) from ordering/fixing #2999

@ivanmem

Description

@ivanmem

We use the vue/attributes-order rule with a custom order. We want to keep the spread attribute (v-bind="attrs") after event listeners (e.g., @click) not just for readability, but for a functional reason: attribute order in Vue determines their application order, which affects the sequence of event handler execution.

If v-bind="attrs" contains its own handlers for the same event (e.g., onClick), then:

  • When placed before @click — the handler from v-bind will be called before the explicit @click.
  • When placed after @click — the handler from v-bind will be called after.

This becomes critical when v-bind="object" is used for rest props pass-through, and the developer needs to control whether the custom handler runs before or after the component's internal logic.

Current behavior:
The rule always reports an error and auto-fixes by moving v-bind="attrs" before events, which may unintentionally change code semantics.

Expected behavior:
Provide a way to exclude v-bind="object" (spread) from strict ordering, e.g., via an ignore option:

'vue/attributes-order': ['warn', {
  order: [/* ... */],
  ignore: ['v-bind'], // ignores only v-bind="object" (directive with no argument)
}]

Proposed semantics (minimal):

  • ignore: ['v-bind'] — ignores only the v-bind="object" attribute (the bind directive with no argument).
  • v-bind:foo="bar" and other directives remain controlled by the rule.

Why eslint-disable-next-line isn't a solution:
While we can use // eslint-disable-next-line vue/attributes-order, it creates noise in the code and doesn't scale well for projects where this order (v-bind after events) is a conscious standard.

Repro (Vue 3):

<template>
  <!-- Handler from `attrs.onClick` will be called AFTER explicit `onClick` -->
  <MyButton @click="onClick" v-bind="attrs" />
</template>

Config:

{
  rules: {
    'vue/attributes-order': ['warn', {
      order: [
        'DEFINITION',
        ['CONDITIONALS', 'LIST_RENDERING'],
        'SLOT',
        'ATTR_STATIC',
        'ATTR_SHORTHAND_BOOL',
        'ATTR_DYNAMIC',
        'TWO_WAY_BINDING',
        'OTHER_DIRECTIVES',
        'RENDER_MODIFIERS',
        'CONTENT',
        'EVENTS',
      ],
    }],
  },
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions