Properties

We've seen how we can create classes and use the Component decorator; let's now take a look at how we can define "props" inside of our class using the vue-property-decorator:

# Install Vue Property Decorator
npm install vue-property-decorator --save-dev

This depends on the vue-class-component, so anytime we install vue-property-decorator you'll need to ensure vue-class-component is also installed. Let's then define a Component property using the @Prop decorator:

<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

// Omitted
@Component({
})
export default class App extends Vue {
@Prop({ default: 'Paul Halliday' }) name: string;
}
</script>

Notice how we're now importing the Component from 'vue-property-decorator' instead of vue-class-component. This is because it exports this as a module for us to import. We're then defining a new component property with the key of name and the default value of 'Paul Halliday'; prior to using TypeScript, it would have looked as follows:

export default {
 props: {
 name: {
  type: String,
  default: 'Paul Halliday'
  }
 }
}