vue/order-in-components
enforce order of properties in components
- ⚙️ This rule is included in
"plugin:vue/recommended". - 🔧 The
--fixoption 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 orLIFECYCLE_HOOKS. If an element is the array of strings, it means any of those can be placed there unordered. Default is above.