This is a documentation for version 7.0.0-beta.4.
To check version 6.2.2 go here. To check previous releases go here.

# vue/order-in-components

enforce order of properties in components

  • ⚙️ This rule is included in "plugin:vue/vue3-recommended" and "plugin:vue/recommended".
  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.

# 📖 Rule Details

This rule makes sure you keep declared order of properties in components. Recommended order of properties can be found here.

<script> /* ✓ GOOD */ export default { name: 'app', props: { propA: Number }, data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
Now loading...
<script> /* ✗ BAD */ export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, props: { propA: Number } } </script>
Now loading...

# 🔧 Options

  "vue/order-in-components": ["error", {
    "order": [
      ["delimiters", "comments"],
      ["components", "directives", "filters"],
      ["provide", "inject"],
      ["props", "propsData"],
      ["template", "render"],
  • order ((string | string[])[]) ... The order of properties. Elements are the property names or one of the following groups:

    If an element is an array of strings, it means any of those can be placed there unordered. Default is above.

# 📚 Further Reading

# 🔍 Implementation