Component options (like name, props, data, computed, methods, lifecycle hooks, etc.) should be ordered consistently according to a predefined sequence.
A consistent order for component options makes components easier to read, navigate, and maintain. Developers know where to find specific options (e.g., methods are always after lifecycle hooks), reducing cognitive load and improving predictability.
Side-by-side examples engineers can pattern-match during review.
// BAD: Inconsistent order
export default {
methods: {... },
data() {... },
props: {... },
name: 'MyComponent'
}// GOOD: Consistent order (Example based on Vue Style Guide recommendation)
export default {
name: 'MyComponent',
props: {... },
emits: [... ],
data() {... },
computed: {... },
watch: {... },
// Lifecycle Hooks (e.g., created, mounted)
created() {... },
mounted() {... },
methods: {... }
}export default {
methods: { fn1(){/*...*/} },
data() { return { count: 0 }; },
props: ['id'],
name: 'InconsistentOrder'
}export default {
name: 'ConsistentOrder',
props: ['id'],
data() { return { count: 0 }; },
//... other options in order...
methods: { fn1(){/*...*/} }
}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.