eslint-plugin-vue

Appearance

On this page

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.

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",
      "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 ​