Deep Dependency Injection with Provide and Inject

// ParentComponent.vue
<template>
  <div>
    <h1>Parent Component</h1>
    <input type="text" v-model="userName" placeholder="Enter user name" />
    <button @click="incrementCount">Increment Shared Count</button>
    <ChildComponent />
  </div>
</template>

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

const userName = ref('Alice');
const sharedCount = ref(0);

const incrementCount = () => {
  sharedCount.value++;
};

// Provide a reactive value and a function
provide('userNameKey', computed(() => userName.value.toUpperCase())); // Provided as a computed ref
provide('sharedCountKey', sharedCount); // Provided as a ref
provide('incrementSharedCountKey', incrementCount);

// Provide a default theme setting, which can be overridden
provide('theme', 'light');
</script>

// ChildComponent.vue
<template>
  <div style="border: 1px solid #ccc; padding: 10px; margin: 10px;">
    <h2>Child Component</h2>
    <GrandchildComponent />
  </div>
</template>

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

// GrandchildComponent.vue
<template>
  <div style="border: 1px dashed #eee; padding: 10px;">
    <h3>Grandchild Component</h3>
    <p>User Name (from Parent): {{ upperCaseUserName }}</p>
    <p>Shared Count (from Parent): {{ sharedCountValue }}</p>
    <button @click="incrementSharedCount">Increment from Grandchild</button>
    <p>Current Theme (from Parent or default): {{ currentTheme }}</p>
  </div>
</template>

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

// Inject the provided values
const upperCaseUserName = inject('userNameKey', 'N/A'); // With a default value
const sharedCountValue = inject('sharedCountKey', ref(0)); // Injecting a ref, provide a ref as default
const incrementSharedCount = inject('incrementSharedCountKey', () => console.warn('Increment function not provided!'));
const currentTheme = inject('theme', 'dark'); // Inject with a default if not provided
</script>