🧩 Vue Components and Props

Components: The Building Blocks

A component is a self-contained, reusable piece of UI that bundles its own markup, styling, and behavior. Instead of one enormous template, you build an application as a tree of components — a root App that contains a header, a product list, each list item, and so on.

💡 An analogy: Components are like LEGO bricks. Each brick has a defined shape and purpose, and you combine specialized bricks — buttons, cards, forms — to build something far larger than any single piece.

Registering Components

Before you can use a component in a template, Vue needs to know it exists. There are two ways to make that introduction.

Global registration

A globally registered component is available everywhere without importing it again:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import BaseButton from './components/BaseButton.vue';

const app = createApp(App);
app.component('BaseButton', BaseButton);  // usable in any template now
app.mount('#app');

Convenient, but it has costs: globally registered components are harder to tree-shake, and a template that uses <BaseButton> gives no hint about where the component comes from. Reserve global registration for a handful of truly universal base components.

Local registration (preferred)

With <script setup>, simply importing a component registers it — no extra step:

<template>
  <div>
    <h1>Product Page</h1>
    <ProductDetail :product="product" />
    <RelatedProducts :category="product.category" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ProductDetail from './ProductDetail.vue';
import RelatedProducts from './RelatedProducts.vue';

// Imported components are automatically available in the template
const product = ref({ name: 'Widget', category: 'gadgets' });
</script>

Passing Data with Props

Props (short for "properties") are custom attributes a parent sets on a child to hand it data. They are the primary way information flows down the component tree.

💡 An analogy: Props are like function arguments. You call a function with specific inputs to get specific behavior; you render a component with specific props to get specific output.

Declaring props

In <script setup>, declare props with the defineProps compiler macro (no import needed):

<template>
  <div class="product-card">
    <img :src="image" :alt="name">
    <h3>{{ name }}</h3>
    <p class="price">{{ formatPrice(price) }}</p>
    <p v-if="inStock">In stock</p>
    <p v-else class="out-of-stock">Out of stock</p>
    <button :disabled="!inStock">Add to cart</button>
  </div>
</template>

<script setup>
const props = defineProps({
  name:    { type: String,  required: true },
  price:   { type: Number,  required: true },
  image:   { type: String,  default: '/images/default-product.jpg' },
  inStock: { type: Boolean, default: true }
});

function formatPrice(value) {
  return new Intl.NumberFormat('en-US', {
    style: 'currency', currency: 'USD'
  }).format(value);
}
</script>

Using the component

<template>
  <div class="products-grid">
    <ProductCard
      v-for="product in products"
      :key="product.id"
      :name="product.name"
      :price="product.price"
      :image="product.image"
      :in-stock="product.inStock"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ProductCard from './ProductCard.vue';

const products = ref([
  { id: 1, name: 'Wireless Headphones', price: 99.99, image: '/img/hp.jpg', inStock: true },
  { id: 2, name: 'Smartphone', price: 699.99, image: '/img/phone.jpg', inStock: false }
]);
</script>

Prop Validation & Defaults

Vue can validate incoming props and warn you in development when a parent passes the wrong thing. This catches bugs early and doubles as living documentation of a component's API.

Types and defaults

defineProps({
  propA: Number,                    // shorthand: just the type
  propB: [String, Number],          // one of several types
  propC: { type: String, required: true },
  propD: { type: Number, default: 100 }
});

Supported types include String, Number, Boolean, Array, Object, Function, Symbol, and custom constructors.

defineProps({
  user:  { type: Object, default: () => ({ name: 'Guest' }) },
  items: { type: Array,  default: () => [] }
});

Custom validators

For rules beyond type checking, supply a validator function that returns true/false:

defineProps({
  status: {
    type: String,
    validator: (value) => ['draft', 'published', 'archived'].includes(value)
  },
  rating: {
    type: Number,
    validator: (value) => value >= 1 && value <= 5
  }
});

💡 An analogy: Prop validation is the security check at a building entrance. Just as security ensures only people with valid credentials get in, validation ensures a component only receives data it knows how to handle.

One-Way Data Flow

Props flow in one direction: parent to child. When the parent's data updates, the new value flows down. But a child must not reassign a prop it receives — doing so triggers a console warning, because it breaks the predictable, top-down flow of data.

// ❌ Wrong — reassigning a prop inside the child
props.title = 'New title';   // Vue warns: avoid mutating a prop directly

When a child genuinely needs to influence a value, use one of these patterns instead.

Pattern 1 — seed local state from a prop

If the prop is only an initial value the child then owns:

import { ref } from 'vue';
const props = defineProps({ initialCounter: { type: Number, default: 0 } });
const counter = ref(props.initialCounter);   // now the child owns 'counter'

Pattern 2 — a writable computed that emits

For a value the parent must stay in sync with (the basis of v-model on components):

import { computed } from 'vue';
const props = defineProps({ modelValue: String });
const emit = defineEmits(['update:modelValue']);

const inputValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)  // ask the parent to change it
});

💡 An analogy: Think of a restaurant. The chef (parent) sends out dishes via waiters (props). Diners (children) enjoy the food but can't march into the kitchen to change the recipe — they send requests back through the waiter (events). One-way flow keeps the kitchen sane.

Props vs Data

New Vue developers often blur the line between props and a component's own local state. The distinction is fundamental:

They work together

Here a component takes text and maxLength as props, but owns its isExpanded state:

<template>
  <div class="expandable-text">
    <p>{{ isExpanded ? text : truncated }}</p>
    <button v-if="needsExpansion" @click="isExpanded = !isExpanded">
      {{ isExpanded ? 'Read less' : 'Read more' }}
    </button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  text:      { type: String, required: true },
  maxLength: { type: Number, default: 100 }
});

const isExpanded = ref(false);                              // local state
const needsExpansion = computed(() => props.text.length > props.maxLength);
const truncated = computed(() =>
  needsExpansion.value ? props.text.slice(0, props.maxLength) + '…' : props.text
);
</script>

Organizing Components

As an app grows, structure keeps it navigable. Two patterns cover most projects.

Base components

Highly reusable primitives — buttons, inputs, cards — often prefixed Base and kept together:

src/components/base/
├── BaseButton.vue
├── BaseInput.vue
├── BaseCheckbox.vue
└── BaseCard.vue

Feature-based folders

Group everything for one domain together, so working on a feature means opening one folder:

src/components/
├── base/          # shared UI primitives
├── product/       # ProductCard, ProductDetails, ProductFilter…
├── checkout/      # CartSummary, PaymentForm, ShippingForm…
└── user/          # ProfileCard, LoginForm, RegisterForm…

Hands-on Exercise

<template>
  <article class="product-card">
    <img :src="image" :alt="name">
    <h3>{{ name }}</h3>
    <p class="price">{{ formatPrice(price) }}</p>
    <p :class="inStock ? 'ok' : 'out'">
      {{ inStock ? 'In stock' : 'Out of stock' }}
    </p>
    <button :disabled="!inStock">Add to cart</button>
  </article>
</template>

<script setup>
defineProps({
  name:    { type: String,  required: true },
  price:   { type: Number,  required: true },
  image:   { type: String,  default: '/images/placeholder.png' },
  inStock: { type: Boolean, default: true },
  rating:  { type: Number,  validator: (v) => v >= 1 && v <= 5 }
});

function formatPrice(value) {
  return new Intl.NumberFormat('en-US', {
    style: 'currency', currency: 'USD'
  }).format(value);
}
</script>

Best Practices

Summary & Quiz

📚 Further Reading

• Vue — Component Basics
• Vue — Props
• Vue — Slots
• Vue — Official Style Guide

🚀 What's Next?

You can now pass data down. Next we complete the loop with directives and event handling — how to make templates react to state and how children talk back to parents with emitted events.