Vue.js Lesson 6: Components & Props

Components are reusable Vue files. Props pass data from parent to child, just like React but with a Vue-specific syntax.

Creating & Using Components

<!-- components/UserCard.vue -->
<template>
  <div class="user-card">
    <img :src="user.avatar || 'https://i.pravatar.cc/50?u='+user.id'" :alt="user.name" />
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
    <span :class="['badge', user.role]">{{ user.role }}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  user: {
    type: Object,
    required: true
  }
});
</script>

<!-- App.vue -->
<template>
  <UserCard v-for="user in users" :key="user.id" :user="user" />
</template>

<script setup>
import UserCard from "./components/UserCard.vue";
import { ref } from "vue";
const users = ref([...]);
</script>

TypeScript Props

<!-- With TypeScript -->
<script setup lang="ts">
interface User { id: number; name: string; email: string; role: string; }

const props = defineProps<{
  user: User;
  isSelected?: boolean;
  onSelect?: (user: User) => void;
}>();
</script>