What is a wrapper component (wrapper component)?

VueJunior~1 min read

A wrapper component is a component that has no business logic or functionality of its own, but instead serves as a container, styling, or structure for other components/elements.

In simpler terms:

A wrapper component is a component that wraps child content (usually via slots), adding markup, style, or behavior to it, but does not define the content itself.

It is more about structure than about its own content.

A simple wrapper component example

Wrapper.vue

vue

<template>
  <div class="wrapper">
    <slot></slot> <!-- the passed content goes here -->
  </div>
</template>

<style>
.wrapper {
  padding: 20px;
  border: 1px solid #ccc;
}
</style>

Usage

vue

<Wrapper>
  <h1>Title</h1>
  <p>Some content</p>
</Wrapper>

The component just adds style/structure, but does not know what is inside.

Why do you need wrapper components?

This is an important interview question.

1. Building reusable layout components

For example:

Card
Container
Modal
PageLayout
SidebarLayout

They define the structure, while the parent supplies the content.

2. Visual styling without changing the logic

You can change a component's appearance without changing its content.

3. Encapsulating repeating markup

If the same structure repeats many times, it gets wrapped in a component.

For example:

vue

<Card>
  <UserInfo />
</Card>

4. The HOC pattern ("Higher Order Component") in Vue

A wrapper component can:

extend the behavior of its children
pass them data
add handlers
include logic (for example, checking permissions)

5. The common way to implement layouts in the Router

For example:

vue

<AdminLayout>
  <router-view />
</AdminLayout>

Example of a complex wrapper

Modal.vue

vue

<template>
  <div class="overlay" @click="close">
    <div class="modal" @click.stop>
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

This is a pure wrapper: structure plus styles.

Parent:

vue

<Modal>
  <template #header>
    <h2>Sign in</h2>
  </template>

  <LoginForm />

  <template #footer>
    <button @click="close">Close</button>
  </template>
</Modal>

Difference between a wrapper component and a regular component

Regular component	Wrapper component
contains its own content	displays content passed by the parent
performs logic	has minimal or no logic
defines its own UI	defines only the structure and the container
does not depend on slots	usually uses slots

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.