Project 10: Real Estate Card
Vue Engineer
Builds on these lessons
Component Task
Objective
Splitting a UI into components keeps each piece focused. defineProps declares what a child component accepts from its parent; the parent passes data down with :propName.
You're building a real estate listing card.
Task: write a PriceTag component accepting an amount prop, and a ListingCard that renders it with a fixed price.
Component.vue
<!-- PriceTag.vue -->
<script setup>
defineProps(['amount']);
</script>
<template>
<span class="price">${{ amount }}</span>
</template>
<!-- ListingCard.vue -->
<script setup>
import PriceTag from './PriceTag.vue';
</script>
<template>
<div>
<h3>Lakeside Cottage</h3>
<PriceTag :amount="450000" />
</div>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result