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

{
  "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:

  • LIFECYCLE_HOOKS: Vue Lifecycle Events, in the order they are called
  • ROUTER_GUARDS: Vue Router Navigation Guards, in the order they are called

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

📚 Further Reading

• Style guide - Component/instance options order
• Style guide (for v2) - Component/instance options order

🚀 Version

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

🔍 Implementation

• Rule source
• Test source