LowFile-scopeJavaScript / TypeScript Plug & play

Component/instance options order

Component options (like `name`, `props`, `data`, `computed`, `methods`, lifecycle hooks, etc.) should be ordered consistently according to a predefined sequence.

Add to Mesrai Open workspace

Why this matters

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.

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

// BAD: Inconsistent order
export default {
  methods: {... },
  data() {... },
  props: {... },
  name: 'MyComponent'
}

Prefer

// 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: {... }
}

More snippets

Bad

export default {
  methods: { fn1(){/*...*/} },
  data() { return { count: 0 }; },
  props: ['id'],
  name: 'InconsistentOrder'
}

Good

export default {
  name: 'ConsistentOrder',
  props: ['id'],
  data() { return { count: 0 }; },
  //... other options in order...
  methods: { fn1(){/*...*/} }
}

Related rules

From the same buckets as this rule.

High
Avoid `v-if` with `v-for`
Never use `v-if` on the same element as `v-for`.
performance-efficiencystack-vue+1
High
Disabling Vue.js built-in escaping is security-sensitive
Avoid using directives or features that bypass Vue's built-in HTML escaping mechanisms, such as the `v-html` directive, unless the content is known to be safe or has been properly sanitized.
security-hardeningstack-vue
High
Use component-scoped styling
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.
module-architecturestack-vue+1

Bad vs. good

Side-by-side examples engineers can pattern-match during review.

Avoid

// BAD: Inconsistent order
export default {
  methods: {... },
  data() {... },
  props: {... },
  name: 'MyComponent'
}

Prefer

// 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: {... }
}

More snippets

Bad

export default {
  methods: { fn1(){/*...*/} },
  data() { return { count: 0 }; },
  props: ['id'],
  name: 'InconsistentOrder'
}

Good

export default {
  name: 'ConsistentOrder',
  props: ['id'],
  data() { return { count: 0 }; },
  //... other options in order...
  methods: { fn1(){/*...*/} }
}

Related rules

From the same buckets as this rule.

High

Avoid `v-if` with `v-for`

Never use `v-if` on the same element as `v-for`.

performance-efficiencystack-vue+1

High

Disabling Vue.js built-in escaping is security-sensitive

Avoid using directives or features that bypass Vue's built-in HTML escaping mechanisms, such as the `v-html` directive, unless the content is known to be safe or has been properly sanitized.

security-hardeningstack-vue

High

Use component-scoped styling

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.

module-architecturestack-vue+1