Higher-order components concept in Vue - Mini Project: Build & Apply

Higher-order components concept

📖 Scenario: You are building a Vue 3 app where you want to reuse some logic to add a border style to different components. Instead of repeating the border code, you will create a higher-order component (HOC) that wraps any component and adds a border around it.

🎯 Goal: Build a higher-order component in Vue 3 that takes a component and returns a new component with a red border around it. Then use this HOC to wrap a simple message component and display it with the border.

📋 What You'll Learn

Create a simple message component that displays a text

Create a higher-order component function that accepts a component and returns a new component

The returned component should render the original component inside a div with a red border

Use the higher-order component to wrap the message component and display it

💡 Why This Matters

🌍 Real World

Higher-order components help reuse common logic or styling in Vue apps without repeating code. This pattern is useful for theming, layout wrappers, or adding behavior to many components.

💼 Career

Understanding higher-order components is valuable for Vue developers to write clean, reusable, and maintainable code in professional projects.

1

Create the simple message component

Create a Vue 3 component called Message using <script setup> that renders a <p> element with the text "Hello from Message component!".

Vue

// Your code here



  

Hint

Use <script setup> and a simple <p> tag inside the template to show the message.

2

Create the higher-order component function

Add a function called withRedBorder that accepts a component called WrappedComponent and returns a new Vue component. This new component should render WrappedComponent inside a <div> with a style attribute setting border: '2px solid red'.

Vue

// Create the withRedBorder function below
// Your code here



  Hello from Message component!

Hint

Use Vue's h function to create the wrapper div with a red border style and render the passed component inside.

3

Wrap the Message component with the higher-order component

Import the Message component and create a new component called BorderedMessage by passing Message to the withRedBorder function. Register BorderedMessage so it can be used in the template.

Vue

import { h } from 'vue'
// Import Message component
import Message from './Message.vue'

// Create BorderedMessage by wrapping Message
// Your code here




  Hello from Message component!

Hint

Use import Message from './Message.vue' and then create BorderedMessage by calling withRedBorder(Message).

4

Render the wrapped component in the template

Replace the existing <p> in the template with the <BorderedMessage /> component to display the message inside the red border.

Vue

import { h } from 'vue'
import Message from './Message.vue'

function withRedBorder(WrappedComponent) {
  return {
    name: 'WithRedBorder',
    setup() {
      return () => h('div', { style: { border: '2px solid red', padding: '0.5rem' } }, [h(WrappedComponent)])
    }
  }
}

const BorderedMessage = withRedBorder(Message)



  
  

Hint

Use the component tag <BorderedMessage /> inside the template to show the wrapped message.