Component prop types and validation rules

In addition to their name, props can have types, as well as validation rules:

props: { 
  title: String, 
  link: String, 
  visitors: Number, 
  isVisible: Boolean, 
  messages: Array, 
  owner: Object, 
  children: [Object, String] // multiple accepted types 
} 

If a type is defined for a property, Vue will ensure that you pass the expected types before creating the component.

It is possible to use custom constructor functions as types; in that case, Vue will use an instanceof check. Unfortunately, this is much less interesting than what Angular can do with its native (compile-time) TypeScript support. However, as we'll see later, we can also use TypeScript with Vue.

Here's a more advanced example, with a required Object property that has a default value and a custom validation function:

props: { 
  task: { 
    type: Object, 
    required: true, 
    default: function() { 
        return { 
            id: -1, 
            description: "Default", 
        }; 
    }, 
    validator: function(value) { 
        return typeof value.id === 'number' && typeof
         value.description 
        === 'string'; 
    } 
  } 
}

In the preceding code, the validator ensures that the value has an id property of the number type and a string description. Note that those are pure JavaScript runtime type checks.