Dependency injection patterns in Vue - Mini Project: Build & Apply

Dependency Injection Patterns in Vue

📖 Scenario: You are building a simple Vue app where a child component needs to use a shared message from its parent using dependency injection.

🎯 Goal: Create a Vue app with a parent component that provides a message using provide and a child component that injects and displays that message using inject.

📋 What You'll Learn

Use Vue 3 Composition API with <script setup>

Create a parent component that provides a string message with provide

Create a child component that injects the message with inject

Render the child component inside the parent component

Display the injected message inside the child component template

💡 Why This Matters

🌍 Real World

Dependency injection helps share data or services between components without passing props through many layers. This pattern is common in Vue apps for global settings, themes, or shared state.

💼 Career

Understanding dependency injection in Vue is important for building scalable and maintainable applications, a key skill for frontend developer roles.

1

Create the Parent Component with Provided Message

Create a Vue component file named Parent.vue. Inside the <script setup> block, import provide from 'vue'. Then create a constant called message with the value 'Hello from Parent'. Use provide to share this message with the key 'sharedMessage'. In the template, add a <div> with the text Parent Component and include the <Child /> component below it. Import the Child component from './Child.vue'.

Vue

// Your code here


  

Hint

Remember to import provide from 'vue' and call it inside <script setup>. Also import the Child component and use it in the template.

2

Create the Child Component with Injected Message

Create a Vue component file named Child.vue. Inside the <script setup> block, import inject from 'vue'. Use inject to get the value with the key 'sharedMessage' and store it in a constant called injectedMessage. In the template, display the text Child Component: followed by the injected message using interpolation.

Vue

// Your code here


  

Hint

Use inject with the same key 'sharedMessage' to receive the message provided by the parent.

3

Use the Parent Component in the App

In your main application file (e.g., App.vue), import the Parent component from './Parent.vue'. Inside the <script setup> block, import Parent. In the template, render the <Parent /> component.

Vue

// Your code here


  

Hint

Import the Parent component and use it in the template to see the full app with dependency injection.

4

Add Accessibility and Responsive Styling

In Parent.vue, add a role="region" attribute and aria-label="Parent container" to the outer <div>. In Child.vue, add role="region" and aria-label="Child message" to the outer <div>. Also, add a simple CSS style block in both components to center the text and add padding. Use rem units for padding and font size. Ensure the layout looks good on small screens by adding a media query that reduces font size on screens narrower than 400px.

Vue

import { provide } from 'vue'
import Child from './Child.vue'

const message = 'Hello from Parent'
provide('sharedMessage', message)



  
    Parent Component
    
  



/* Your styles here */

Hint

Use semantic roles and aria-labels on container divs for accessibility. Use rem units for padding and font size. Add a media query for small screens.