Provide and inject for deep passing in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will the nested component display?

Consider a Vue 3 app using provide in a parent and inject in a deeply nested child. What text will the DeepChild component render?

Vue

/* Parent.vue */
<template>
  <Child />
</template>
<script setup>
import { provide } from 'vue'
import Child from './Child.vue'
provide('message', 'Hello from Parent')
</script>

/* Child.vue */
<template>
  <DeepChild />
</template>
<script setup>
import DeepChild from './DeepChild.vue'
</script>

/* DeepChild.vue */
<template>
  <p>{{ injectedMessage }}</p>
</template>
<script setup>
import { inject } from 'vue'
const injectedMessage = inject('message', 'Default message')
</script>

A Hello from Parent

B Default message

C undefined

D Error: injection not found

💡 Hint

Remember that provide/inject works across multiple nested components if the key matches.

The provide in the Parent component makes the value available to all descendants. The DeepChild component uses inject with the same key, so it receives 'Hello from Parent'.

❓ state_output

intermediate

What is the output after updating the provided value?

Given a parent component that provides a reactive object, and a nested child that injects and displays a property, what will the child show after the parent updates the property?

Vue

/* Parent.vue */
<template>
  <Child />
  <button @click="updateMessage">Change Message</button>
</template>
<script setup>
import { reactive, provide } from 'vue'
import Child from './Child.vue'
const state = reactive({ message: 'Initial' })
provide('state', state)
function updateMessage() {
  state.message = 'Updated'
}
</script>

/* Child.vue */
<template>
  <p>{{ state.message }}</p>
</template>
<script setup>
import { inject } from 'vue'
const state = inject('state')
</script>

A Shows Updated immediately on load

B Initial, then changes to Updated after button click

C Always shows Initial, does not update

D Error: state is undefined

💡 Hint

Reactive objects provided are shared and updates reflect in injected components.

Because the parent provides a reactive object, the child sees changes to its properties. Clicking the button updates the message, which the child displays.

📝 Syntax

advanced

Which option correctly provides and injects a value for deep passing?

Identify the correct syntax to provide a value in a parent and inject it in a nested child component in Vue 3 Composition API.

A Parent: provide('key', value); Child: const val = inject('key')

B Parent: provide = ('key', value); Child: const val = inject('key')

C Parent: provide('key', value); Child: const val = inject('key', defaultValue)

D Parent: provide('key', value); Child: const val = inject()

💡 Hint

Inject can accept a default value to avoid undefined if the key is missing.

Option C shows correct provide syntax and inject with a default value, which is valid and safe. Option C misses the default value, which is optional but recommended. Option C has invalid provide syntax. Option C calls inject without arguments, causing an error.

🔧 Debug

advanced

Why does the injected value show undefined in the nested child?

A developer uses provide in a parent and inject in a nested child, but the injected value is undefined. What is the most likely cause?

Vue

/* Parent.vue */
<script setup>
import { provide } from 'vue'
provide('data', 'Hello')
</script>

/* DeepChild.vue */
<script setup>
import { inject } from 'vue'
const data = inject('data')
console.log(data) // undefined
</script>

A All of the above

B The inject key does not match the provide key

C The child component is not a descendant of the provider

D The provide call is outside the setup function or lifecycle, so it runs too early

💡 Hint

Check provide location, key names, and component hierarchy.

All these reasons can cause inject to return undefined: provide called outside setup, mismatched keys, or child not nested inside provider component.

🧠 Conceptual

expert

How does Vue's provide/inject mechanism support deep passing without prop drilling?

Explain why provide/inject is useful for passing data deeply in a component tree compared to props, and what limitations it has.

A Provide/inject is a global state management system that replaces Vuex.

B Provide/inject automatically makes all data reactive and replaces the need for props entirely.

C Provide/inject only works for immediate children and cannot pass data deeply.

D Provide/inject allows passing data directly to any descendant without intermediate props, but it is not reactive by default and should be used sparingly.

💡 Hint

Think about how provide/inject avoids passing props through many layers and its reactivity behavior.

Provide/inject lets you pass data to any descendant without passing props through every intermediate component. However, the provided value is not reactive unless you provide a reactive object. It is not a global state system and should be used carefully.

Practice

1. What is the main purpose of provide and inject in Vue?

easy

A. To replace Vuex for state management in all cases.

B. To share data deeply between ancestor and descendant components without passing props.

C. To handle component lifecycle hooks automatically.

D. To style components globally using CSS variables.

Solution

1. Step 1: Understand the role of provide and inject

   Provide and inject allow passing data from an ancestor component to any descendant without manually passing props through each intermediate component.

2. Step 2: Compare with other options

   Vuex is a separate state management tool, lifecycle hooks handle component events, and CSS variables style components; none of these are the main purpose of provide/inject.

3. Final Answer:

   To share data deeply between ancestor and descendant components without passing props. -> Option B

4. Quick Check:

   Provide/inject = deep data sharing [OK]

Hint: Remember: provide/inject skips prop drilling [OK]

Common Mistakes:

• Thinking provide/inject replaces Vuex completely
• Confusing provide/inject with lifecycle hooks
• Assuming provide/inject is for styling

2. Which of the following is the correct way to use provide in a Vue 3 setup function?

easy

A. provide('key', 'value')

B. provide: { key: 'value' }

C. this.provide = { key: 'value' }

D. const provide = { key: 'value' }

Solution

1. Step 1: Recall provide usage in setup()

   In Vue 3 setup, provide is a function imported from 'vue' and called as provide('key', value).

2. Step 2: Check other options

   const provide = { key: 'value' } is an object, not a function call; this.provide = { key: 'value' } uses this which is not available in setup; provide: { key: 'value' } is invalid syntax.

3. Final Answer:

   provide('key', 'value') -> Option A

4. Quick Check:

   Provide is a function call in setup [OK]

Hint: Use provide('key', value) inside setup() [OK]

Common Mistakes:

• Trying to assign provide as an object
• Using this inside setup()
• Confusing provide option with function call

3. Given this Vue 3 code snippet, what will be logged in the child component?

import { provide, inject } from 'vue';

export default {
  setup() {
    provide('color', 'blue');
  }
}

// In child component
export default {
  setup() {
    const color = inject('color');
    console.log(color);
  }
}

medium

A. 'blue'

B. undefined

C. null

D. An error is thrown

Solution

1. Step 1: Understand provide and inject behavior

   The ancestor provides the key 'color' with value 'blue'. The child injects 'color', so it receives 'blue'.

2. Step 2: Confirm no default value or errors

   Since 'color' is provided, inject returns 'blue', not undefined or null, and no error occurs.

3. Final Answer:

   'blue' -> Option A

4. Quick Check:

   Inject returns provided value 'blue' [OK]

Hint: Inject returns provided value if key matches [OK]

Common Mistakes:

• Expecting undefined if not passed as prop
• Assuming inject returns null by default
• Thinking inject throws error if key missing

4. Identify the error in this Vue 3 code using provide/inject:

export default {
  setup() {
    provide = { theme: 'dark' };
  }
}

export default {
  setup() {
    const theme = inject('theme');
    return { theme };
  }
}

medium

A. The key 'theme' is not provided properly because it is misspelled.

B. inject is missing a default value.

C. provide is incorrectly assigned as an object instead of called as a function.

D. setup() cannot return reactive data.

Solution

1. Step 1: Check provide usage

   Provide must be called as a function: provide('key', value). Here, provide is assigned an object, which is invalid.

2. Step 2: Verify other options

   Inject default value is optional; key spelling matches; setup can return reactive data.

3. Final Answer:

   provide is incorrectly assigned as an object instead of called as a function. -> Option C

4. Quick Check:

   Provide must be called, not assigned [OK]

Hint: Provide is a function call, not an object assignment [OK]

Common Mistakes:

• Assigning provide as an object instead of calling it
• Thinking inject requires default value always
• Confusing setup return rules

5. You want to share a reactive theme object deeply across many nested components using provide/inject. Which approach correctly ensures reactivity is preserved in descendants?

hard

A. Provide a reactive object but inject a copy using { ...injected } to avoid mutation.

B. Provide a plain object and inject it, then wrap it with reactive() in each child.

C. Provide a ref with the reactive object and inject the ref, then use .value in children.

D. Provide a reactive object using reactive() and inject it directly.

Solution

1. Step 1: Understand reactivity with provide/inject

   Provide a reactive object created with reactive() and inject it directly. Vue automatically ensures the injected value is deeply reactive in descendants.

2. Step 2: Analyze other options

   Provide a plain object and inject it, then wrap it with reactive() in each child. uses a plain object (no reactivity) and re-wrapping creates separate instances. Provide a ref with the reactive object and inject the ref, then use .value in children. unnecessarily wraps a reactive object in a ref, adding extra complexity with .value. Provide a reactive object but inject a copy using { ...injected } to avoid mutation. copies the object, breaking the reactivity connection.

3. Final Answer:

   Provide a reactive object using reactive() and inject it directly. -> Option D

4. Quick Check:

   reactive() object + direct provide/inject = preserved reactivity [OK]

Hint: Provide reactive({}) directly and inject without .value [OK]

Common Mistakes:

• Injecting plain objects and expecting reactivity
• Wrapping injected objects again with reactive
• Copying objects and losing reactivity