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.

Practice

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

easy

A. To define routes in a Vue application

B. To share data or functions between components without passing props manually

C. To handle component lifecycle hooks

D. To create global CSS styles for components

Solution

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

   They allow sharing data or functions from a parent component to its descendants without passing props through every intermediate component.

2. Step 2: Compare with other options

   The other options relate to defining routes, creating global CSS styles, and handling component lifecycle hooks, which are unrelated to provide/inject.

3. Final Answer:

   To share data or functions between components without passing props manually -> Option B

4. Quick Check:

   Dependency injection = share data without props [OK]

Hint: Remember provide/inject shares data without prop drilling [OK]

Common Mistakes:

• Confusing provide/inject with props or events
• Thinking provide/inject manages styles or routing
• Assuming provide/inject replaces Vuex or global state

2. Which of the following is the correct syntax to provide a value in a Vue 3 component using the Composition API?

easy

A. const value = inject('key')

B. this.provide('key', value)

C. provide('key', value)

D. inject('key', value)

Solution

1. Step 1: Identify provide syntax in Composition API

   In Vue 3 Composition API, you call provide('key', value) inside setup() to share data.

2. Step 2: Check other options

   const value = inject('key') is for injection, not providing. this.provide('key', value) uses this which is not used in setup(). inject('key', value) is incorrect because inject does not provide values.

3. Final Answer:

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

4. Quick Check:

   Provide = provide('key', value) [OK]

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

Common Mistakes:

• Using inject instead of provide to share data
• Trying to call provide on this inside setup()
• Confusing provide syntax with options API methods

3. Given the following Vue 3 setup, what will be logged in the child component?

import { provide, inject } from 'vue';
const Parent = {
  setup() {
    provide('message', 'Hello from parent')
  }
}

const Child = {
  setup() {
    const msg = inject('message')
    console.log(msg)
  }
}

medium

A. null

B. undefined

C. An error because provide is missing a return

D. 'Hello from parent'

Solution

1. Step 1: Understand provide/inject behavior

   The parent provides the string 'Hello from parent' with key 'message'. The child injects this key and receives the value.

2. Step 2: Predict console output

   Since the child injects the provided key correctly, it logs 'Hello from parent'.

3. Final Answer:

   'Hello from parent' -> Option D

4. Quick Check:

   Inject returns provided value = 'Hello from parent' [OK]

Hint: Inject returns what provide shares by key [OK]

Common Mistakes:

• Expecting undefined if no return in setup
• Confusing provide with returning values
• Assuming inject returns null if key exists

4. What is wrong with this Vue 3 code snippet?

import { provide, inject } from 'vue';
const Parent = {
  setup() {
    provide('data', 123)
  }
}

const Child = {
  setup() {
    const data = inject('data')
    console.log(data)
  }
}

medium

A. inject is missing a default value, may cause undefined

B. provide is called outside setup()

C. provide must return an object

D. inject cannot be used in setup()

Solution

1. Step 1: Check provide usage

   Provide is correctly called inside setup() with key 'data' and value 123.

2. Step 2: Check inject usage

   Inject is called correctly but without a default value. If the key is missing, it returns undefined, which might cause issues.

3. Final Answer:

   inject is missing a default value, may cause undefined -> Option A

4. Quick Check:

   Inject without default can be undefined [OK]

Hint: Always provide default value to inject to avoid undefined [OK]

Common Mistakes:

• Thinking provide must return an object
• Believing inject can't be used in setup
• Assuming provide is outside setup here

5. You want to share a reactive object between a grandparent and a grandchild component using provide/inject in Vue 3. Which approach correctly ensures the grandchild reacts to changes in the shared object?

hard

A. Provide a reactive object using provide('state', reactiveObj) and inject it normally in the grandchild

B. Provide a plain object and inject it with a default value in the grandchild

C. Provide a reactive object but inject it inside onMounted hook in the grandchild

D. Provide a reactive object but convert it to a ref before injecting

Solution

1. Step 1: Understand reactive sharing with provide/inject

   Providing a reactive object directly shares its reactivity, so descendants see updates.

2. Step 2: Evaluate options for reactivity

   Provide a reactive object using provide('state', reactiveObj) and inject it normally in the grandchild correctly provides a reactive object and injects it normally, preserving reactivity. Provide a plain object and inject it with a default value in the grandchild uses a plain object, losing reactivity. Provide a reactive object but inject it inside onMounted hook in the grandchild delays injection unnecessarily. Provide a reactive object but convert it to a ref before injecting converts reactive to ref, which is unnecessary and may cause confusion.

3. Final Answer:

   Provide a reactive object using provide('state', reactiveObj) and inject it normally in the grandchild -> Option A

4. Quick Check:

   Reactive object provided and injected keeps reactivity [OK]

Hint: Provide reactive object directly to keep reactivity in inject [OK]

Common Mistakes:

• Providing plain objects losing reactivity
• Injecting inside lifecycle hooks unnecessarily
• Converting reactive to ref before injecting