Project 11: FAQ Accordion
Vue Engineer
Builds on these lessons
Component Task
Objective
A <slot /> lets a parent component pass arbitrary template content into a child, instead of just plain data through props — the child decides where that content renders.
You're building an FAQ accordion.
Task: write an AccordionItem component with a question prop and a default slot for the answer, used by a parent with one FAQ.
Component.vue
<!-- AccordionItem.vue -->
<script setup>
defineProps(['question']);
</script>
<template>
<div class="accordion-item">
<h4>{{ question }}</h4>
<div class="answer"><slot /></div>
</div>
</template>
<!-- FaqPage.vue -->
<script setup>
import AccordionItem from './AccordionItem.vue';
</script>
<template>
<AccordionItem question="Is shipping free?">
Yes, on all orders over $50.
</AccordionItem>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result