VueJS - standard practice for ordering functions in export?

user_1704772 0
Viewed 144

New to Vue and wondering if there is there a standard practice for ordering the exports? The name seems to always be at the top and the lifecycle hooks seem to be in the order of the lifescycle but I'm not sure about the rest (data, computed, etc.).

Thoughts?

e.g. 

export default {
  name: "component-name",
  props: {},
  components: {},
  computed: {},
  data() {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {},
};
vue.js
1 Answers

Based on the rules of the eslint-plugin-vue v6.2.2 (for Vue 2.x), You can read about it here: https://github.com/vuejs/eslint-plugin-vue/blob/v6.2.2/docs/rules/README.md, this is the order:

{
  "vue/order-in-components": ["error", {
    "order": [
      "el",
      "name",
      "parent",
      "functional",
      ["delimiters", "comments"],
      ["components", "directives", "filters"],
      "extends",
      "mixins",
      "inheritAttrs",
      "model",
      ["props", "propsData"],
      "fetch",
      "asyncData",
      "data",
      "computed",
      "watch",
      "LIFECYCLE_HOOKS",
      "methods",
      "head",
      ["template", "render"],
      "renderError"
    ]
  }]
}

Here you can read the Vue style guide and the rules priority information https://v2.vuejs.org/v2/style-guide/

user_89031320
Related