JS.VUE.ORDER.IN.COMPONENTS

Rule Details

This rule makes sure you keep declared order of properties in components. Recommended order of properties can be found here (https://vuejs.org/style-guide/rules-recommended.html#component-instance-options-order).

{'vue/order-in-components': ['error']}

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

{'vue/order-in-components': ['error']}

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

• LIFECYCLE_HOOKS: Vue Lifecycle Events (https://v3.vuejs.org/guide/instance.html#lifecycle-diagram), in the order they are called

• ROUTER_GUARDS: Vue Router Navigation Guards (https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-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 (https://vuejs.org/style-guide/rules-recommended.html#component-instance-options-order)
• Style guide (for v2) - Component/instance options order (https://v2.vuejs.org/v2/style-guide/#Component-instance-options-order-recommended)