How to validate props in Vue

Validating props in Vue ensures component reliability, provides better developer experience, and catches errors early by enforcing type constraints and custom validation rules. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented comprehensive prop validation in thousands of Vue components to ensure API consistency and prevent runtime errors in enterprise applications. From my expertise, the most effective approach is to use Vue’s built-in prop validation with type checking and custom validators. This method provides runtime validation, clear error messages, and excellent development experience while maintaining component robustness.

Use Vue’s prop validation with type checking, required constraints, and custom validators for reliable component APIs.

<template>
  <div class="user-card">
    <h3>{{ name }}</h3>
    <p>{{ role }}</p>
    <p>Age: {{ age }}</p>
    <p>Score: {{ score }}</p>
    <div :class="{ active: isActive }">
      Status: {{ status }}
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  age: {
    type: [Number, String],
    required: true,
    validator: value => {
      const numAge = typeof value === 'string' ? parseInt(value) : value
      return numAge >= 0 && numAge <= 150
    }
  },
  role: {
    type: String,
    default: 'user',
    validator: value => {
      return ['admin', 'moderator', 'user', 'guest'].includes(value)
    }
  },
  score: {
    type: Number,
    default: 0,
    validator: value => value >= 0 && value <= 100
  },
  isActive: {
    type: Boolean,
    default: false
  }
})

const status = computed(() => {
  return props.isActive ? 'Online' : 'Offline'
})
</script>
<!-- Usage examples -->
<UserCard
  name="John Doe"
  :age="25"
  role="admin"
  :score="85"
  :is-active="true"
/>

Vue prop validation uses the validator function to implement custom validation logic that returns true for valid values and false for invalid ones. Combine type checking with custom validators for comprehensive validation. Use required constraints for mandatory props and provide sensible defaults for optional ones. Validation only runs in development mode for performance.

Best Practice Note:

This is the same approach we use in CoreUI Vue components for robust prop validation and excellent developer experience.


Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


About the Author

Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
How to return multiple values from a JavaScript function
How to return multiple values from a JavaScript function

JavaScript printf equivalent
JavaScript printf equivalent

How to Add a Tab in HTML
How to Add a Tab in HTML

How to compare dates with JavaScript
How to compare dates with JavaScript

Answers by CoreUI Core Team