How to validate props in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
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.
