While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-component
flattens 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>