Vue.js — components based on decorators with TypeScript

Hello! Before I will describe about migrating to TypeScript with decorators based components I want to tell about the reason for preparing this material. My first frontend framework is Angular 4 and after a long time working on it, of course, I got used to decorators based programming method. At start of this year I had to migrate to Vue.js and start to write a large enough application. I had a lot of components with long templates and scripts and I wanted to try to divide template, script and style to different files and start to use decorators for Object Oriented Programming paradigm. This article will very helpful for migrating from Angular to Vue.js.

Create application

For the first need to initialise our application with standard vue tool. It gives to us a lot of settings without writing code and manuals learning. You can skip preparing step and initialise application yourself, but it may not work. Let’s create an application.

vue create myapp

After run command above need to choose “select manually features”, because you didn’t have required preset yet.

In the next window We should select Babel, TypeScript and Linter. Also you can select other features, but there are not necessary in this step.

Next shouldn’t select class-style component syntax because will add another packages exactly for TypeScript later.

Also auto-detected polyfills not necessary for this app. You could setup it as you like. The next step is linter selection. As applications uses TypeScript need to select TSLint. And next features is not necessary — you can setup it as you like.

Setup application

After successful application initialisation need to install two packages:

npm i vue-class-component vue-property-decorator

First package gives class based component and second package gives decorators for all vue.js key features, like props, watchers, emitter etc. After successfully installation We could create components based on classes and decorators with divided files. Let’s do it!

$ mkdir ./components/hello
$ touch hello.component.html hello.component.ts hello.component.vue hello.component.css

In this moment I suggest to use schematics or something like it for generating this files automatically. Let’s open hello.component.vue file and write there next:

<template src=“./hello.component.html”></template>
<script src=“./hello.component.ts” lang=“ts”></script>
<style src=“./hello.component.css” lang=“css” scoped></style>

Now, we have a few important moments: all paths should be relative by current directory, script and style tags should have lang attribute: it need for detection which language is uses. Next, open the hello.component.ts file and write next:

import { Component, Vue } from ‘vue-property-decorator’;
@Component
export default class HelloComponent extends Vue { }

And that’s all! After these steps you could to use components based on decorators. This method of using Vue.js is helpful for a complex projects with a lot of components, because you can write code with Object Oriented Programming method and call Vue features with decorators. Also extending Vue class gives the scope of component: e.g. you could call router also as before:

this.$router

Decorators based components doesn’t mean that you couldn’t use native vue components — you could use also as before.

Thank you for reading!

Completed application you would find here: https://github.com/dkildar/vuejs-typescript-initial

Vue class component: https://github.com/vuejs/vue-class-component

Vue property decorator: https://github.com/kaorun343/vue-property-decorator

Our telegram channel: https://t.me/frontend_html_css_js