Suggest 'components' be placed before 'props'

[fritx]

https://github.com/pablohpsilva/vuejs-component-style-guide#why-6

Again, grouping makes the component easier to read (name; extends; props, data and computed; components; watch and methods; lifecycle methods, etc.);

export default {
    // Do not forget this little guy
    name: 'RangeSlider',
    // share common functionality with component mixins
    mixins: [],
    // compose new components
    extends: {},
    // component properties/variables
    props: {
      bar: {}, // Alphabetized
      foo: {},
      fooBar: {},
    },
    // variables
    data() {},
    computed: {},
    // when component uses other components
    components: {},
    // methods
    watch: {},
    methods: {},
    // component Lifecycle hooks
    beforeCreate() {},
    mounted() {},
};

I suggest components be placed after extends and before props, because it is intensively related to the<template> on top, and nothing else.

like: https://github.com/vuejs/vue-hackernews-2.0/blob/master/src/views/ItemList.vue

I suffer from scrolling too much, and think it is not ~~relational~~(rational). Any thoughts? Cheers!

[pablohpsilva]

Hello @fritx ! Let's talk about it. Yeap, I do believe all components attributes should be easy to read and easy to spot. With that in mind, I believe it would be better if computed attr could be placed right after props.

"But... Why?" You may ask. I believe name, mixins, extends, props are very important to know what the component is (name), what is made of (mixins, extends) and what you can do with it (props). Everything else, from a user (another developer) point of view is not really relevant, specially if the component works.

I love having the props all the way up, because, usually, that's what really matters to me when using components.

What do you think?

[fritx]

@pablohpsilva Hah, thanks for your reply!

I believe name, mixins, extends, props are very important to know what the component is (name), what is made of (mixins, extends) and what you can do with it (props).

I'm very agreed with that, and I think, "Birds of a feather flock together", another principle is cool as well -- things should be categorized by types.

The accepted values of components are same as extends and mixins, are all Components, so I think a better practice is to place them together, it would look very clear.

For example, in one of my libraries: https://github.com/fritx/vue-threejs/search?utf8=%E2%9C%93&q=components%3A&type=

import { PositionalAudio, AudioLoader } from 'three'
import Object3D from './Object3D'

export default {
  name: 'PositionalAudio',
  mixins: [Object3D],
  components: { Object3D },
  inject: ['global'],

  props: {
    refDistance: { type: Number, default: 10 },
    volume: { type: Number, default: 1 },
    paused: Boolean,
    loop: Boolean,
    url: String
  },