How to Validate Props in Vue: Syntax and Examples

In Vue, you validate props by defining the props option in your component with type checks, required flags, and custom validator functions. This ensures the component receives the correct data type and values, improving reliability and debugging.

Syntax

Use the props option in your Vue component to specify expected prop names and their validation rules. You can define props as simple types or as objects with type, required, default, and validator properties.

• type: The expected data type (e.g., String, Number, Boolean, Array, Object).
• required: Boolean to mark if the prop must be provided.
• default: A default value if the prop is not passed.
• validator: A function to check custom conditions on the prop value.

javascript

export default {
  props: {
    title: String, // simple type check
    count: {
      type: Number,
      required: true,
      default: 0
    },
    status: {
      type: String,
      validator: value => ['active', 'inactive', 'pending'].includes(value)
    }
  }
}

Example

This example shows a Vue component that validates three props: title as a string, count as a required number with a default, and status as a string limited to specific values.

vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <p>Status: {{ status }}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    count: {
      type: Number,
      required: true,
      default: 0
    },
    status: {
      type: String,
      validator: value => ['active', 'inactive', 'pending'].includes(value)
    }
  }
}
</script>

Output

<div>
  <h1>Hello Vue</h1>
  <p>Count: 5</p>
  <p>Status: active</p>
</div>

Common Pitfalls

• Not marking required props can lead to undefined values and bugs.
• Using incorrect types causes Vue to warn but does not stop execution.
• For custom validation, forgetting to return true or false in the validator function breaks validation.
• Default values for objects or arrays must be functions returning the default to avoid shared state.

javascript

props: {
  items: {
    type: Array,
    default: () => [] // ✅ Correct way to provide default array
  },
  options: {
    type: Object,
    default: () => ({}) // ✅ Correct way to provide default object
  },
  level: {
    type: Number,
    validator(value) {
      // Missing return statement - validation fails
      return value > 0
    }
  }
}

Quick Reference

Prop Option	Description	Example
type	Expected data type	type: String
required	Is prop mandatory	required: true
default	Default value if missing	default: 10 or default: () => ({})
validator	Custom validation function	validator: val => val > 0

Key Takeaways

Define props with types and required flags to catch errors early.

Use custom validator functions for complex prop rules.

Always return a new object or array from default functions to avoid shared state.

Vue warns on invalid props but does not stop rendering.

Proper prop validation improves component reliability and debugging.