Vue Component Structure

SampleComponent.vue

<template lang="html">
  <div class="sample-class">
    <!-- ... -->
  </div>
</template>

<script type="text/javascript">
  export default {
    // Don't forget
    name: 'SampleComponent',
    // Share common functionalities with mixins
    mixins: [],
    // Compose new components
    extends: {},
    // Properties/Variables
    props: {
      bar: {}, // Alphabetized
      foo: {},
      fooBar: {},
    },
    // Variables
    data() {},
    computed: {},
    // Other components used
    components: {},
    // Methods
    watch: {},
    methods: {},
    // Lifecycle hooks
    beforeCreate() {},
    mounted() {},
};
</script>

<style lang="sass" scoped>
  .sample-class {
    /* ... */
  }
</style>