Vue Props

Passing Props

Props declare the public inputs of a component. Treat them as read-only.

In script setup, use defineProps with runtime or types.

<script setup lang="ts">
const props = defineProps<{ title: string; count?: number }>()
</script>
<template>
  <h2>{{ title }}</h2>
</template>

Typed props with defineProps.

Validation

required, types, defaults, validators (runtime declarations)

• Prefer Vue 3 + Composition API.
• Use script setup for SFCs.
• Keep components focused.
• Lean on official docs.

Vue Props Cheatsheet

Quick reference for patterns covered in this lesson.

withDefaults

Provide default values for type-based props.

Common Mistakes

• Mutating props in children.
• Huge prop bags that should be slots/provide.

Key Takeaways

• Vue Props is a core Vue skill.
• Practice in a Vite app.
• Prefer clarity.
• Revisit docs for edge cases.