Prop Typing and Validation

Props define the interface of Vue.js components. As JavaScript is a dynamically typed language, Vue.js provides a tool we can use to validate the shape and types of props.

To validate prop types, the props component property in its object literal form should be used (as opposed to the simpler array form).

Primitive Prop Validation

Say we want a Repeat.vue component that takes a times prop, as well as a content prop. We can define the following:

<template>
  <div>
    <span v-for="r in repetitions" :key="r">
      {{ content }}
    </span>
  </div>
</template>
<script>
export default {
  props: ['times', 'content'],
  computed: {
    repetitions() {
      return Array.from({ length: this.times });
 &...