Project 13: Job Board Listing
Vue Engineer
Builds on these lessons
Component Task
Objective
provide()/inject() pass reactive state down through a component tree without threading it through every prop in between — useful for shared filters or settings.
You're building a job board with a remote-only filter.
Task: in a JobBoard component, provide a remoteOnly ref under the key 'remoteOnly'; in a child JobFilter, inject and display it.
Component.vue
<!-- JobBoard.vue -->
<script setup>
import { provide, ref } from 'vue';
import JobFilter from './JobFilter.vue';
const remoteOnly = ref(false);
provide('remoteOnly', remoteOnly);
</script>
<template>
<JobFilter />
</template>
<!-- JobFilter.vue -->
<script setup>
import { inject } from 'vue';
const remoteOnly = inject('remoteOnly');
</script>
<template>
<p>Remote only: {{ remoteOnly }}</p>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result