Suggest an edit

Improve this article

Refine the answer for “What is a wrapper component (wrapper component)?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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> 
  </div>
</template>

#### 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>

<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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts388 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.