Project 22: Video Player Layout
Vue Engineer
Component Task
Objective
Review day: combine provide/inject and lifecycle — days 9 and 13 — to share playback state across components.
You're building a video player's play button.
Task: in a PlayerProvider component, provide an isPlaying ref and log a message in onMounted; in a child PlayButton, inject it and toggle it on click.
Component.vue
<!-- PlayerProvider.vue -->
<script setup>
import { provide, ref, onMounted } from 'vue';
import PlayButton from './PlayButton.vue';
const isPlaying = ref(false);
provide('isPlaying', isPlaying);
onMounted(() => {
console.log('Player mounted');
});
</script>
<template>
<PlayButton />
</template>
<!-- PlayButton.vue -->
<script setup>
import { inject } from 'vue';
const isPlaying = inject('isPlaying');
function toggle() {
isPlaying.value = !isPlaying.value;
}
</script>
<template>
<button @click="toggle">{{ isPlaying ? 'Pause' : 'Play' }}</button>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result