Project 20: Pricing Table
Vue Engineer
Component Task
Objective
Review day: combine slots and props — days 10 and 11 — to build a reusable pricing tier card.
You're building a pricing table.
Task: write a PlanCard component accepting name and price props plus a default slot for the feature list, used once for a 'Pro' plan.
Component.vue
<!-- PlanCard.vue -->
<script setup>
defineProps(['name', 'price']);
</script>
<template>
<div class="plan">
<h3>{{ name }} - ${{ price }}</h3>
<slot />
</div>
</template>
<!-- PricingTable.vue -->
<script setup>
import PlanCard from './PlanCard.vue';
</script>
<template>
<PlanCard name="Pro" :price="29">
<p>Unlimited projects</p>
</PlanCard>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result