order-in-components.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/order-in-components	enforce order of properties in components

vue/order-in-components

enforce order of properties in components

• ⚙️ This rule is included in "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>

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

🔧 Options

{
  "vue/order-in-components": ["error", {
    "order": [
      "el",
      "name",
      "parent",
      "functional",
      ["delimiters", "comments"],
      ["components", "directives", "filters"],
      "extends",
      "mixins",
      "inheritAttrs",
      "model",
      ["props", "propsData"],
      "data",
      "computed",
      "watch",
      "LIFECYCLE_HOOKS",
      "methods",
      ["template", "render"],
      "renderError"
    ]
  }]
}

• order ((string | string[])[]) ... The order of properties. Elements are the property names or LIFECYCLE_HOOKS. If an element is the array of strings, it means any of those can be placed there unordered. Default is above.

📚 Further reading

• Style guide - Component/instance options order

🔍 Implementation

• Rule source
• Test source