Vue Class based component — using Typescript

As I preparing my application for Vue JS 3 Migration, I decided to write all the existing components in typescript and class based. I figured out how can I convert them easily to class. Lets walk through each items in a component and how can they be easy rewritten.

For this, I am using Vue Class Component & vue-property-decorator and its easy to use.

Class Style Component

Below is simple syntax for class style vue component using`@ component` decorator.

A component will have properties, lets see how can we define them

Prop decorator

@Prop(options: (PropOptions | Constructor[] | Constructor) = {}) decorator

which is exactly similar to the older version

Watch decorator:

@Watch(path: string, options: WatchOptions = {}) decorator

is equivalent to

Computed Property

Computed property are treated as getter and setter.

Mixins:

If you have mixins, those can be used like this

or you can extend the class with mixin

So, am sure this would help you to kick start conversion of your components to class styled typescript components.

Happy Coding!!

Interested in learning git hooks and how can they help you? read about them here