Vue.js 2 Design Patterns and Best Practices

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 Decoratornpm 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