What are props in Vue?

Props are a way to pass data from parent component to child in Vue.js. They define component interface, making it reusable and configurable without hard binding to internal state.

Why Props?

Component decomposition. Extract logic and template into separate component, passing only necessary data.
Reusability. Same component can be used in different places with different prop values.
Interface clarity. By declaring props, you document component expectations and get static checking.

Declaring Props

Options API

export default {
  name: "UserCard",
  props: {
    // required, String type
    name: {
      type: String,
      required: true
    },
    // optional, Number type, default value
    age: {
      type: Number,
      default: 18
    },
    // simple validation
    isActive: {
      type: Boolean,
      validator: value => typeof value === "boolean"
    }
  }
};

Composition API

import { defineComponent } from "vue";

export default defineComponent({
  name: "UserCard",
  props: {
    name: { type: String, required: true },
    age: { type: Number, default: 18 },
    isActive: Boolean
  },
  setup(props) {
    // props.name, props.age, props.isActive available here
    return { props };
  }
});

Don't modify props inside component:

props are incoming data; for internal state use data or ref in Composition API.

Usage Example

<template>
  <div class="user-card">
    <h2>{{ name }}</h2>
    <p>Age: {{ age }}</p>
    <p v-if="isActive">Status: Active</p>
  </div>
</template>

<script>
export default {
  props: ["name", "age", "isActive"]
};
</script>

Note:

In Composition API you can destructure props immediately in setup: setup({ name, age, isActive }) { /* … */ }

Steps for Working with Props

1. Declare props

Define props property in component with type and rules (required, default, validator)

2. Pass values

In parent component use attributes: <UserCard name="John" :age="30" :isActive="true" />3

3. Use inside

Access props as reactive variables: {{ name }}, {{ age }}.

Recommendations

Declare props explicitly (as object) to enable typing and validation.
Use default values for optional props.
If you need to transform incoming data, do it in computed properties (computed), not directly in props.

More in official Vue documentation: Vue Props Documentation

Content

Why Props?Declaring PropsOptions APIComposition APIUsage ExampleSteps for Working with PropsRecommendations

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems