Project 19: Profile Settings Card
Vue Engineer
Component Task
Objective
Review day: combine lifecycle hooks and component composition — days 9 and 10 — so a parent fetches data and hands it to a child via props.
You're building a profile settings card.
Task: write an Avatar component accepting a url prop, and a ProfileCard that sets an avatarUrl ref in onMounted and passes it down.
Component.vue
<!-- Avatar.vue -->
<script setup>
defineProps(['url']);
</script>
<template>
<img :src="url" alt="Avatar">
</template>
<!-- ProfileCard.vue -->
<script setup>
import { ref, onMounted } from 'vue';
import Avatar from './Avatar.vue';
const avatarUrl = ref('');
onMounted(() => {
avatarUrl.value = 'avatar.jpg';
});
</script>
<template>
<Avatar :url="avatarUrl" />
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result