Avoiding Prop Drilling with Vue 3 `provide` and `inject`

// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <button @click="toggleTheme">Toggle Theme</button>
    <IntermediateComponent />
  </div>
</template>

<script setup>
import { ref, provide, readonly } from 'vue';
import IntermediateComponent from './IntermediateComponent.vue';

const currentTheme = ref('light');

const toggleTheme = () => {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
};

// Provide a reactive value (and a way to update it, if needed)
// Using readonly to prevent child components from directly modifying currentTheme
provide('theme-key', readonly(currentTheme));
provide('toggle-theme-key', toggleTheme);
</script>

// IntermediateComponent.vue
<template>
  <div class="intermediate">
    <h2>Intermediate Component</h2>
    <p>I don't need the theme, but I pass through.</p>
    <GrandchildComponent />
  </div>
</template>

<script setup>
import GrandchildComponent from './GrandchildComponent.vue';
</script>

<style scoped>
.intermediate {
  border: 1px dashed #ccc;
  padding: 10px;
  margin: 10px 0;
}
</style>

// GrandchildComponent.vue
<template>
  <div :class="['grandchild', theme]">
    <h3>Grandchild Component</h3>
    <p>Current Theme: {{ theme }}</p>
    <button @click="toggleTheme">Toggle Theme (from Grandchild)</button>
  </div>
</template>

<script setup>
import { inject } from 'vue';

// Inject the provided values
const theme = inject('theme-key');
const toggleTheme = inject('toggle-theme-key');
</script>

<style scoped>
.grandchild {
  padding: 15px;
  border-radius: 8px;
  margin-top: 10px;
}
.grandchild.light {
  background-color: #e0f2f7;
  color: #333;
}
.grandchild.dark {
  background-color: #333;
  color: #f0f0f0;
}
</style>