Why this matters
Consistent attribute ordering improves the readability of templates, especially for elements with many attributes or directives. It makes it easier to quickly scan and understand the element's behavior and properties.
Attributes within an element tag (including components) should be ordered consistently according to a predefined sequence (e.g., definitions, list rendering, conditionals, unique attributes, binding, events, content).
Consistent attribute ordering improves the readability of templates, especially for elements with many attributes or directives. It makes it easier to quickly scan and understand the element's behavior and properties.
Side-by-side examples engineers can pattern-match during review.
<MyComponent
@click="handleClick"
v-if="isVisible"
:prop-a="valueA"
id="my-comp"
v-for="item in items"
:key="item.id"
/>// GOOD: Consistent order (Example based on Vue Style Guide recommendation)
<MyComponent
v-for="item in items" // List Rendering
:key="item.id"
v-if="isVisible" // Conditionals
id="my-comp" // Global Awareness
:prop-a="valueA" // Other Attributes
@click="handleClick" // Events
/><MyComponent @click="fn" v-if="ok" :prop="val" id="c1"/><MyComponent id="c1" v-if="ok" :prop="val" @click="fn"/>From the same buckets as this rule.
For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.