Let’s create an application and learn the usage of vue-property-decorator. Using a standard Vue tool we need to first initialize our application.

vue create myapp

Run the above command and choose “select manually features”. In the next window that appears select Babel, TypeScript and Linter. You can also choose other features if you want. Do not select class-style component syntax which will add other packages for TypeScript. Next step is Linter selection. Select TSLint and set it as you like.  Now initialization is successful so install two packages.

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

The first package gives a class based component. Second package vue-property-decorator gives decorators for all vue.js key features. Now lets create components based on classes and decorators with divided files.

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

To generate files automatically use schematics or something like that. Open hello.component.vue file and write the below code.

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

All paths should be relative by current directory, script, style tags should have a lang attribute to identify which language is used. Open hello.component.ts file and write the following code.

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

Now you are all set and you can use components based on decorators. This method will be useful for complex projects that have a lot of components.