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.

Practice

1. What is the main purpose of a higher-order component (HOC) in Vue?

easy

A. To create a new Vue instance from scratch

B. To replace the Vue router with a new navigation system

C. To wrap a component and add shared logic or styling

D. To directly manipulate the DOM elements inside a component

Solution

1. Step 1: Understand what HOCs do

   Higher-order components wrap existing components to add extra features without changing the original component.

2. Step 2: Identify the correct purpose

   Among the options, only wrapping a component to add shared logic or styling matches the HOC concept.

3. Final Answer:

   To wrap a component and add shared logic or styling -> Option C

4. Quick Check:

   HOC purpose = wrap and add logic [OK]

Hint: HOCs wrap components to add features without changing them [OK]

Common Mistakes:

• Confusing HOCs with routing or Vue instance creation
• Thinking HOCs manipulate DOM directly
• Believing HOCs replace components instead of wrapping

2. Which of the following is the correct syntax to create a higher-order component in Vue 3 using the Composition API?

easy

A. const withLogger = (WrappedComponent) => { return { setup() { return () => h(WrappedComponent) } } }

B. const withLogger = (WrappedComponent) => { return WrappedComponent.setup() }

C. const withLogger = (WrappedComponent) => { return new Vue({ render: () => h(WrappedComponent) }) }

D. const withLogger = (WrappedComponent) => { return () => WrappedComponent }

Solution

1. Step 1: Review HOC syntax in Vue 3

   A HOC is a function that returns a new component wrapping the original. Using setup and render function with h() is correct.

2. Step 2: Check each option

   const withLogger = (WrappedComponent) => { return { setup() { return () => h(WrappedComponent) } } } returns a component object with setup returning a render function that renders WrappedComponent, which is correct.

3. Final Answer:

   const withLogger = (WrappedComponent) => { return { setup() { return () => h(WrappedComponent) } } } -> Option A

4. Quick Check:

   HOC returns component with setup and render [OK]

Hint: HOCs return a new component wrapping the original with setup [OK]

Common Mistakes:

• Calling setup() directly instead of returning a component
• Using new Vue() in Vue 3 Composition API
• Returning the component function without wrapping

3. Given this HOC code in Vue 3:

const withBorder = (WrappedComponent) => {
  return {
    setup() {
      return () => h('div', { style: { border: '2px solid red' } }, [h(WrappedComponent)])
    }
  }
}

const Base = { template: '
Hello
' }
const Enhanced = withBorder(Base)

What will <Enhanced /> render?

medium

A. Hello

B. Hello

C. Hello

D. Error: h() cannot wrap components

Solution

1. Step 1: Understand the HOC rendering

   The HOC wraps the WrappedComponent inside a div with a red border style.

2. Step 2: Predict the rendered output

   Rendering <Enhanced /> produces a div with red border containing the Base component's paragraph.

3. Final Answer:

   <div style="border: 2px solid red"><p>Hello</p></div> -> Option B

4. Quick Check:

   HOC adds border div around component [OK]

Hint: HOCs wrap output in extra elements or logic [OK]

Common Mistakes:

• Ignoring the wrapping div and expecting only <p>
• Thinking h() cannot wrap components
• Assuming no styles are applied

4. Identify the error in this Vue 3 HOC code:

const withTitle = (WrappedComponent) => {
  return {
    setup() {
      return () => h(WrappedComponent)
    }
  }
}

const Base = { template: '
Hi
' }
const Enhanced = withTitle(Base)

// Usage: <Enhanced title="Welcome" />

What is the problem?

medium

A. The HOC does not pass props to WrappedComponent

B. The HOC should use a class component instead

C. The Base component must be a function, not an object

D. The setup function cannot return a render function

Solution

1. Step 1: Check prop forwarding in HOC

   The HOC returns WrappedComponent but does not forward any props it receives.

2. Step 2: Understand consequence

   When using <Enhanced title="Welcome" />, the title prop is lost because it's not passed down.

3. Final Answer:

   The HOC does not pass props to WrappedComponent -> Option A

4. Quick Check:

   Props must be forwarded in HOCs [OK]

Hint: Always forward props from HOC to wrapped component [OK]

Common Mistakes:

• Forgetting to pass props in render function
• Thinking setup can't return render function
• Believing Base must be a function component

5. You want to create a higher-order component withLoading that shows a loading message while data is loading, then renders the wrapped component with the loaded data. Which approach correctly combines HOC logic with Vue 3 Composition API?

hard

A. Create a mixin that adds loading state and use it inside the wrapped component

B. Modify the wrapped component's template directly to add loading message

C. Use a global variable to track loading and conditionally render wrapped component

D. Return a component with setup() that uses ref for loading state, fetches data, and renders loading or wrapped component with props

Solution

1. Step 1: Understand HOC with loading logic

   The HOC should manage loading state internally and decide what to render based on it.

2. Step 2: Identify correct Vue 3 pattern

   Using setup with ref for loading, fetching data, and returning a render function that shows loading or wrapped component with data is correct.

3. Final Answer:

   Return a component with setup() that uses ref for loading state, fetches data, and renders loading or wrapped component with props -> Option D

4. Quick Check:

   HOC manages state and renders conditionally [OK]

Hint: Use setup with state and conditional render in HOC [OK]

Common Mistakes:

• Changing wrapped component template directly
• Using global variables for state
• Confusing mixins with HOCs