We’ve used @Watch, @Inject and more decorators from . In this lesson however we will guide you through creating your own decorators in order to add common functionality to your Vue components using TypeScript.

 

Import:

import {createDecorator} from 'vue-class-component'

 

Define a decorator:

const Log = (msg) => {  return createDecorator((component, key) => {    console.log("#Component", component);    console.log("#Key", key); //log    console.log("#Msg", msg); //App  })}

 

Using it:

@Log('fullMessage get called')  get fullMessage() {    return `${
   this.message} from Typescript`  }

 

Output:

#Component Object {directives: Object, components: Object, name: "Hello", methods: Object, computed: Object…}#Key fullMessage#Msg fullMessage get called