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

--

--

--

Front End Engineer | Netherlands. They say being human means having doubts yet still continuing on your path, so as I am. www.santhoshkumar.tech

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Objects in JavaScript (1)

14 Frequently Asked Questions about ReactJS

The unexpected impact of dynamic imports on tree shaking

Drag and Drop in Angular 7 with Ng2-Dragula

DOM — a simple intro.

10 things you must know about react.

How to Build NodeJS REST API with Express and PostgreSQL

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Santhoshkumar Ravi

Santhoshkumar Ravi

Front End Engineer | Netherlands. They say being human means having doubts yet still continuing on your path, so as I am. www.santhoshkumar.tech

More from Medium

Vue 3 Programmatic Component Design

Module Federation In Vuejs Applications

SOLID Principles In Vue 2 Components

Load your SVG icons into your Nuxt Project easily