Provide and Inject

🎁 Vue.js Provide & Inject: The Family Gift-Giving System

The Story: A Family Reunion

Imagine a big family reunion. Grandma has a secret recipe book that everyone needs. Instead of passing it hand-to-hand through aunts and uncles, she puts it on the family table. Anyone who needs it can grab it!

That’s Provide and Inject in Vue.js!

• Provide = Grandma puts the recipe book on the table
• Inject = Grandchildren grab it when they need it

No more awkward “pass this to your cousin” chains!

🎯 What Problem Does This Solve?

Without Provide/Inject:

graph TD
    A["Grandparent"] -->|passes prop| B["Parent"]
    B -->|passes prop| C["Child"]
    C -->|passes prop| D["Grandchild"]
    style A fill:#ff6b6b
    style B fill:#ffa500
    style C fill:#ffa500
    style D fill:#4ecdc4

Problem: Parent and Child don’t even USE the data. They’re just messengers! 😩

With Provide/Inject:

graph TD
    A["Grandparent"] -.->|provides| D["Grandchild"]
    A -.->|provides| C["Child"]
    style A fill:#4ecdc4
    style C fill:#4ecdc4
    style D fill:#4ecdc4

Solution: Direct delivery! Skip the middlemen! 🎉

📦 1. Provide and Inject Basics

The Simple Idea

Provide = “I’m sharing this with everyone below me” Inject = “I want to use what someone above shared”

Real Example

<!-- Grandparent.vue -->
<script setup>
import { provide } from 'vue'

// Grandma shares her recipe
provide('secretRecipe', 'Chocolate Cake')
</script>

<!-- Grandchild.vue -->
<script setup>
import { inject } from 'vue'

// Grandchild gets the recipe
const recipe = inject('secretRecipe')
// recipe = 'Chocolate Cake' 🎂
</script>

That’s it! No props drilling through 5 components!

🔧 2. The Provide Function

How Grandma Shares

The provide() function takes two things:

1. A key (the name tag)
2. A value (the actual gift)

<script setup>
import { provide } from 'vue'

// Simple value
provide('familyName', 'Smith')

// Object
provide('familyInfo', {
  name: 'Smith',
  members: 5
})

// Function
provide('greet', () => {
  console.log('Hello, family!')
})
</script>

Rules for Grandma

💉 3. The Inject Function

How Grandchildren Receive

The inject() function grabs what was provided:

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

// Get the family name
const familyName = inject('familyName')

// Get the family info object
const familyInfo = inject('familyInfo')

// Get and use the function
const greet = inject('greet')
greet() // "Hello, family!"
</script>

Important: Inject Only Works Downward

graph TD
    A["Provider ✅"] --> B["Can Inject ✅"]
    B --> C["Can Inject ✅"]
    B --> D["Can Inject ✅"]
    E["Sibling ❌"]
    style A fill:#4ecdc4
    style B fill:#90EE90
    style C fill:#90EE90
    style D fill:#90EE90
    style E fill:#ff6b6b

Children and grandchildren can inject. Siblings and parents cannot!

🛡️ 4. Injection Default Values

What If Grandma Forgot?

Sometimes the value isn’t provided. You need a backup plan!

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

// With default value
const theme = inject('theme', 'light')
// If 'theme' not provided → 'light'

// Default for objects
const config = inject('config', {
  color: 'blue',
  size: 'medium'
})
</script>

Factory Default (For Expensive Objects)

When your default is expensive to create:

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

// Factory function - only runs if needed
const heavyData = inject('data', () => {
  return createExpensiveObject()
}, true) // ← the 'true' means it's a factory
</script>

The third parameter true tells Vue: “This is a factory function, not the default value itself!”

⚡ 5. Reactive Provide/Inject

The Magic: Auto-Updating Values

Normal provides are static. But with ref or reactive, they update automatically!

<!-- Parent.vue -->
<script setup>
import { provide, ref } from 'vue'

const count = ref(0)
provide('count', count)

// When this changes...
const increment = () => count.value++
</script>

<!-- Child.vue -->
<script setup>
import { inject } from 'vue'

// ...this updates automatically! 🎉
const count = inject('count')
</script>

<template>
  <p>Count: {{ count }}</p>
</template>

Best Practice: Provide the Updater Too

<!-- Parent.vue -->
<script setup>
import { provide, ref } from 'vue'

const count = ref(0)
const increment = () => count.value++

// Provide both value AND function
provide('counter', {
  count,
  increment
})
</script>

<!-- Child.vue -->
<script setup>
import { inject } from 'vue'

const { count, increment } = inject('counter')
</script>

<template>
  <button @click="increment">
    Count: {{ count }}
  </button>
</template>

Using readonly for Safety

Prevent children from directly changing parent data:

<script setup>
import { provide, ref, readonly } from 'vue'

const count = ref(0)

// Children can read but not modify
provide('count', readonly(count))
</script>

🏗️ 6. Dependency Injection Pattern

What’s Dependency Injection?

Instead of a component creating what it needs, it receives it from outside.

Without DI:

<script setup>
// Component creates its own API client
const api = new ApiClient('https://api.com')
</script>

With DI:

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

// Component receives API client from parent
const api = inject('api')
</script>

Why This Is Powerful

Real-World Pattern: App-Level Providers

<!-- App.vue -->
<script setup>
import { provide, reactive } from 'vue'

// Provide app-wide services
provide('api', new ApiClient())
provide('auth', reactive({
  user: null,
  login: () => { /* ... */ },
  logout: () => { /* ... */ }
}))
provide('theme', reactive({
  mode: 'dark',
  toggle: () => { /* ... */ }
}))
</script>

Any component in your app can now inject these!

Using Symbols for Safety

Avoid key collisions with Symbols:

// keys.js
export const ApiKey = Symbol('api')
export const AuthKey = Symbol('auth')

<!-- Parent.vue -->
<script setup>
import { provide } from 'vue'
import { ApiKey } from './keys.js'

provide(ApiKey, new ApiClient())
</script>

<!-- Child.vue -->
<script setup>
import { inject } from 'vue'
import { ApiKey } from './keys.js'

const api = inject(ApiKey)
</script>

Symbols are unique. No accidental overwrites!

🎯 Quick Summary

graph TD
    A["🎁 PROVIDE"] -->|shares data| B["Component Tree"]
    B --> C["💉 INJECT"]
    C --> D["Use the data!"]

    E["📦 Default Values"] --> F["Backup if not provided"]
    G["⚡ Reactive"] --> H["Auto-updates"]
    I["🏗️ DI Pattern"] --> J["Flexible & Testable"]

    style A fill:#4ecdc4
    style C fill:#ff6b6b
    style E fill:#ffa500
    style G fill:#9b59b6
    style I fill:#3498db

🚀 You Did It!

You now understand:

• ✅ Provide shares data down the component tree
• ✅ Inject grabs that data anywhere below
• ✅ Default values are your safety net
• ✅ Reactive provide/inject keeps everything in sync
• ✅ Dependency Injection makes your code flexible and testable

No more prop drilling! Your Vue components can now communicate like a happy family at a reunion. Grandma provides, grandchildren receive. Simple! 🎉