How to handle Vue 3 Props Validation

Props are the most important part of a typical component. Validating props is equally important to avoid issues. In this post, we will look at Vue 3 Props Validation.

This post is a continuation of our previous post on Vue 3 Component Props. Therefore, I will recommend you to go through that before starting with this post.

1 – Vue 3 Props Validation during Runtime

The easiest way to handle prop validations in VueJS during runtime is by specifying appropriate data types. The type can be one of the below native constructors:

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

See below example:

<script setup>
const props = defineProps({
  msg: String
})

console.log(props.msg)
</script>

<template>
  <p>
    Greeting msg: {{ msg }}
  </p>
</template>

In the above example component, the prop with name msg is of type String. Basically, if we pass any other type value to this component, we will get a warning message in the console.

2 – VueJS Prop Type as Custom Object

The type of the prop can also be a custom class or a constructor function. For example, we can have a class as below:

class Book {
  constructor(name, author) {
    this.name = name
    this.author = author
  }
}

We can directly use the Book class as prop type in defineProps().

defineProps({
  book: Book
})

This will ensure that the value of book is created using the Book constructor.

3 – Vue 3 Props Validation Parameters

Components can specify requirements for their props such as the types we have discussed in previous sections.

If the type requirement is not met, we get a warning message in the console. This is incredibly useful when developing a component to be used by other developers.

Prop validations can be specified by passing an object in defineProps() instead of an array of strings.

For example, to specify a prop with numeric data, we can declare the defineProps() as below.

defineProps({
  publishYear: Number
})

A particular prop can also have multiple possible data types.

defineProps({
  publishYear: [String, Number]
})

Also, we can specify default value for a prop.

defineProps({
  publishYear: Number,
  default: 2001
})

Also, we can provide VueJS Custom Validator function for a prop type. Custom validators are extremely useful when we want to create our own validation rules.

See below example for custom prop validation in VueJS. The value of genre prop can be one of the below values.

defineProps({
  genre: {
    validator(value) {
      // The value must match one of these strings
      return ['mystery', 'scifi', 'fantasy'].includes(value)
    }
})

We can also specify a particular prop as mandatory by setting the required flag.

defineProps({
  publishYear: Number,
  required: true
})

Some important rules regarding prop validation are as follows:

• All props are optional by default. To make a prop as mandatory, we have to set the required flag to true.
• An absent optional prop other than Boolean will have undefined value.
• The Boolean props that are not provided are automatically set to false.
• Vue will use the default value if the resolved value of a prop turns to be undefined or is explicitly set to undefined.

Conclusion

Vue 3 Props Validation is a neat feature that allows developers to build error-free components. With prop validations, there is no ambiguity to the type of expected data.

Want to learn more about VueJS? Check out this post on VueJS Reactivity.

If you have any comments or queries about this post, please feel free to mention them in the comments section below.