How to set default props in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Setting default props is essential for creating robust Vue components that handle missing prop values gracefully while providing sensible fallbacks and maintaining component reliability. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented default props in thousands of Vue components to ensure backward compatibility, reduce prop-related errors, and improve developer experience in enterprise component libraries. From my expertise, the most effective approach is to use the default option in props definitions with proper type checking. This method provides type safety, clear documentation, and automatic fallback behavior while maintaining component flexibility and preventing runtime errors.
Use the default option in props definition to set fallback values for missing component properties.
<template>
<div class="user-card" :class="cardClasses">
<div class="user-avatar">
<img :src="avatar" :alt="name + ' avatar'">
</div>
<div class="user-info">
<h3 class="user-name">{{ name }}</h3>
<p class="user-role">{{ role }}</p>
<div class="user-stats">
<span>Posts: {{ postsCount }}</span>
<span>Score: {{ score }}</span>
</div>
<div class="user-status" :class="{ active: isActive }">
{{ isActive ? 'Online' : 'Offline' }}
</div>
<div class="user-preferences">
<h4>Settings:</h4>
<pre>{{ JSON.stringify(settings, null, 2) }}</pre>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'UserCard',
props: {
// String with default value
name: {
type: String,
default: 'Anonymous User'
},
// String with complex default
role: {
type: String,
default: 'Member'
},
// Number with default
postsCount: {
type: Number,
default: 0
},
// Number with validation and default
score: {
type: Number,
default: 100,
validator: value => value >= 0
},
// Boolean with default
isActive: {
type: Boolean,
default: false
},
// Array with default (using function)
tags: {
type: Array,
default: () => []
},
// Object with default (using function)
settings: {
type: Object,
default: () => ({
theme: 'light',
notifications: true,
language: 'en'
})
},
// String with default using function
avatar: {
type: String,
default: () => 'https://via.placeholder.com/150'
},
// String with multiple possible types and default
size: {
type: [String, Number],
default: 'medium',
validator: value => ['small', 'medium', 'large'].includes(value)
},
// Custom default based on other logic
theme: {
type: String,
default: () => {
// Could access system preferences or other logic
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
}
}
},
computed: {
cardClasses() {
return [
`user-card--${this.size}`,
`user-card--${this.theme}`,
{
'user-card--active': this.isActive
}
]
}
}
}
</script>
<!-- Usage examples:
<UserCard />
<UserCard name="John Doe" :posts-count="42" />
<UserCard :settings="{ theme: 'dark' }" />
-->
Default props in Vue are defined using the default option within prop definitions. For primitive values like strings, numbers, and booleans, use direct values. For objects and arrays, always use functions that return new instances to avoid shared references between component instances. Default values are applied when props are undefined, but not when they’re explicitly set to null. Combine defaults with type checking and validation for robust components. Function-based defaults can include complex logic for dynamic default values.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for reliable prop handling and component flexibility. Always use functions for object and array defaults, provide sensible defaults that make components work out of the box, combine with prop validation for better development experience, and document default behavior in component documentation.
