eslint-plugin-vue

Appearance

vue/order-in-components ​

enforce order of properties in components

  • ⚙️ This rule is included in all of "plugin:vue/recommended", *.configs["flat/recommended"], "plugin:vue/vue2-recommended" and *.configs["flat/vue2-recommended"].
  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.
  • 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 Rule Details ​

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

Now loading...
Now loading...

🔧 Options ​

json
{  "vue/order-in-components": ["error", {  "order": [  "el",  "name",  "key",  "parent",  "functional",  ["delimiters", "comments"],  ["components", "directives", "filters"],  "extends",  "mixins",  ["provide", "inject"],  "ROUTER_GUARDS",  "layout",  "middleware",  "validate",  "scrollToTop",  "transition",  "loading",  "inheritAttrs",  "model",  ["props", "propsData"],  "emits",  "slots",  "expose",  "setup",  "asyncData",  "data",  "fetch",  "head",  "computed",  "watch",  "watchQuery",  "LIFECYCLE_HOOKS",  "methods",  ["template", "render"],  "renderError"  ]  }] }

  • 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 ​

🚀 Version ​

This rule was introduced in eslint-plugin-vue v3.2.0

🔍 Implementation ​