Dependency injection patterns in Vue - Step-by-Step Execution

Concept Flow - Dependency injection patterns

Create Provider Component

↓

Define Provide Key & Value

↓

Child Component Requests Injection

↓

Inject Value Using Key

↓

Use Injected Value in Child

↓

Render Child with Dependency

Shows how a parent component provides a value that child components inject and use.

Execution Sample

Vue

import { provide, inject } from 'vue';

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

// Child component
export default {
  setup() {
    const color = inject('color');
    return { color };
  }
};

Parent provides a 'color' value, child injects and uses it.

Execution Table

Step	Action	Component	Provide/Inject Key	Value	Result
1	Parent setup runs	Parent	color	blue	Value 'blue' provided under key 'color'
2	Child setup runs	Child	color	-	Child requests injection of 'color'
3	Injection resolved	Child	color	blue	Child receives value 'blue'
4	Child uses value	Child	-	blue	Child renders using injected 'blue'
5	Render complete	Both	-	-	Child shows color 'blue' from injection

💡 Injection completes when child receives provided value and renders

Variable Tracker

Variable	Parent Setup	Child Setup	After Injection	Final
providedValue	blue	blue	blue	blue
injectedValue	-	undefined	blue	blue

Key Moments - 3 Insights

Why does the child get 'undefined' before injection?

Before injection (see execution_table step 2), the child has no value until inject() resolves it in step 3.

Can the child inject a key not provided by the parent?

No, if the parent does not provide a key, inject() returns undefined or a default value (not shown here).

Does provide() create reactive bindings automatically?

No, provide() passes the value as is; to make it reactive, you must provide reactive objects explicitly.

Visual Quiz - 3 Questions

Look at the execution_table, what value does the child receive at step 3?

A undefined

B 'color'

C 'blue'

D null

💡 Hint

Check the 'Value' column at step 3 in the execution_table.

At which step does the child request the injected value?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look for 'Child requests injection' in the 'Action' column.

If the parent did not provide 'color', what would the child receive?

A undefined

B 'blue'

C null

D an error

💡 Hint

Recall the key_moments about missing provide keys and inject() behavior.

Concept Snapshot

Dependency Injection in Vue:
- Parent uses provide(key, value) in setup()
- Child uses inject(key) in setup() to access value
- Injected values are passed down the component tree
- If no provider, inject returns undefined or default
- Reactive values must be explicitly provided
- Enables loose coupling and easier testing

Full Transcript

Dependency injection in Vue works by having a parent component provide a value with a key using the provide() function inside its setup. Child components can then request this value by calling inject() with the same key inside their setup. The process starts with the parent providing the value, then the child requesting it, receiving it, and finally using it in rendering. If the child tries to inject a key that the parent did not provide, it will get undefined. Also, provide does not automatically make values reactive; you must provide reactive objects explicitly. This pattern helps components share data without tight coupling.