How to define props in Vue

Defining props properly is crucial for creating reusable Vue components with clear APIs, type safety, and predictable data flow between parent and child components. As the creator of CoreUI, a widely used open-source UI library, I’ve designed comprehensive prop systems for Vue components including validation, default values, and flexible customization options in enterprise applications. From my expertise, the most robust approach is to use object syntax with type validation and default values. This method provides excellent developer experience, runtime validation, and clear component interfaces that prevent common bugs and improve maintainability.

Define props using object syntax with type validation, default values, and documentation.

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

Vue props are defined in the props object with comprehensive configuration options. Each prop can specify type for runtime validation (String, Number, Boolean, Array, Object, Function), required for mandatory props, default for fallback values, and validator functions for custom validation logic. This creates a robust component API that validates inputs, provides helpful error messages in development, and documents expected usage. Props are reactive and automatically update the component when parent data changes.

Best Practice Note:

This is the same approach we use in CoreUI Vue components for reliable prop validation and clear component interfaces. In Vue 3 with Composition API, use defineProps<{ title: string; size?: 'small' | 'medium' | 'large' }>() with TypeScript for compile-time type checking and better IDE support.


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.
What are the three dots `...` in JavaScript do?
What are the three dots `...` in JavaScript do?

Dealing with Sass Deprecation Warnings in Angular 19
Dealing with Sass Deprecation Warnings in Angular 19

How to check if a key exists in JavaScript object?
How to check if a key exists in JavaScript object?

How to capitalize the first letter in JavaScript?
How to capitalize the first letter in JavaScript?

Answers by CoreUI Core Team