[Vue @Component] Simplify Vue Components with vue-class-component

While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-componentflattens component development by allowing you to add your data properties and handlers directly as properties of your class.

 

Install:

npm install vue-class-component --save

 

jsconfig.json:

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

 

 

App.vue:

<template>
  <h1 @click="onClick">
    {{message}}
  </h1>
</template>

<script>
import Vue from "vue"
import Component from "vue-class-component"

@Component({})
export default class App extends Vue {
  message = "Hello from class"

  onClick() {
    this.message = "Goodbye"
  }
}
</script>