Dependency injection patterns in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue 3 component output when using provide/inject?

Consider this Vue 3 setup using provide and inject. What will the child component display?

Vue

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

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

A Displays: Default message

B Displays: Hello from parent

C Throws an error because inject key is missing

D Displays nothing because provide is not reactive

💡 Hint

Remember that provide passes data down the component tree and inject receives it.

The parent uses provide to share the string 'Hello from parent' with the key 'msg'. The child uses inject with the same key, so it receives that string and displays it.

📝 Syntax

intermediate

Which option correctly injects a provided value in Vue 3 Composition API?

Choose the correct syntax to inject a provided value named config in a Vue 3 component using inject.

A const config = inject('config', defaultValue)

B const config = inject('config')

C const config = inject(config)

D const config = provide('config')

💡 Hint

Inject accepts a key string and optionally a default value.

Option A correctly calls inject with the key 'config' and a default value. Option A misses the default value but is valid syntax; however, the question asks for the correct way including fallback. Option A wrongly uses provide. Option A passes a variable instead of a string key.

🔧 Debug

advanced

Why isn't the injected value reactive in this Vue 3 component?

Given this parent and child component, why is the injected value in the child not reactive?

Vue

/* Parent.vue */
<script setup>
import { provide, ref } from 'vue'
const count = ref(5)
provide('count', count.value)
</script>
<template>
  <Child />
</template>

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

A Because inject key 'count' is misspelled in child

B Because provide must be called inside setup(), not at top level

C Because provide passes a primitive value, the child gets a static copy, not reactive

D Because ref values cannot be provided or injected

💡 Hint

Think about reactivity and how ref values are passed.

The parent provides count.value, which is a primitive number, not reactive. The child injects that static number. To keep reactivity, the parent should provide the ref itself, not its value.

🧠 Conceptual

advanced

What is a key benefit of using dependency injection in Vue 3?

Why do developers use dependency injection patterns like provide and inject in Vue 3?

A To replace Vuex or Pinia as the only state management solution

B To tightly couple components so they depend on each other directly

C To automatically update the DOM without using reactive data

D To share data or services across components without prop drilling

💡 Hint

Think about how data flows between components.

Dependency injection allows passing data or services from ancestor to descendant components without passing props through every intermediate component, avoiding prop drilling.

❓ state_output

expert

What will be the output after clicking the button in this Vue 3 example using provide/inject with reactive state?

Analyze this Vue 3 code. What will the child component display after the button is clicked once?

Vue

/* Parent.vue */
<script setup>
import { ref, provide } from 'vue'
const count = ref(0)
provide('count', count)
function increment() {
  count.value++
}
</script>
<template>
  <button @click="increment">Increment</button>
  <Child />
</template>

/* Child.vue */
<script setup>
import { inject } from 'vue'
const count = inject('count')
</script>
<template>
  <p>Count is: {{ count.value }}</p>
</template>

A Count is: 1

B Count is: 0

C Count is: undefined

D Count is: NaN

💡 Hint

Remember that ref is reactive and shared via provide/inject.

The parent provides a reactive ref count starting at 0. Clicking the button increments count.value to 1. The child injects the same reactive ref and displays the updated value.