-
-
Notifications
You must be signed in to change notification settings - Fork 700
Description
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 fromv-bindwill be called before the explicit@click. - When placed after
@click— the handler fromv-bindwill 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 thev-bind="object"attribute (thebinddirective 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',
],
}],
},
}