Suggest an edit

Improve this article

Refine the answer for “What is a "layout 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)

**Layout Component** is a **wrapper component** that defines **the structure (skeleton) of a page**:
for example, it contains a header, footer, sidebar, and a content area.

Layout components **are not responsible for business logic or specific data**,
they define **the outer skeleton and the repeating parts of the application's interface**.

---

## 1. The main idea

Layout components let you **avoid duplicating** code and **re-rendering** the same elements on every page.

For example, instead of inserting `Header` and `Footer` into every component manually,
we create a single `MainLayout.vue` that holds the common skeleton and a `<slot>` for the content.

---

## 2. Example of a simple layout component

### `MainLayout.vue`

```javascript
<template>
  <div class="layout">
    <Header />
    <main class="content">
      <slot></slot> 
    </main>
    <Footer />
  </div>
</template>

---

### Using the layout component

```javascript
<template>
  <MainLayout>
    <h1>Home page</h1>
    <p>Content that will be inserted inside the layout through the slot.</p>
  </MainLayout>
</template>

Everything inside `<MainLayout>...</MainLayout>`
is inserted into the `<slot>` of the `MainLayout.vue` component.

---

## 3. Several different layout components

Real projects often have **several layouts**:

- `MainLayout` - for regular pages;
- `AuthLayout` - for login/registration pages;
- `DashboardLayout` - for the admin panel.

Example:

```javascript

<template>
  <div class="auth-layout">
    <slot></slot>
  </div>
</template>

Usage:

```javascript
<AuthLayout>
  <LoginForm />
</AuthLayout>
```

---

## 4. Layout + routing

If Vue Router is used, layout components can be plugged in **through routes**:

```javascript
{
  path: '/',
  component: MainLayout,
  children: [
    { path: '', component: HomePage },
    { path: 'about', component: AboutPage }
  ]
},
{
  path: '/login',
  component: AuthLayout,
  children: [
    { path: '', component: LoginPage }
  ]
}
```

This way, different pages can use **different layouts** depending on the route.

---

## 5. Advantages of layout components

**A unified page structure**
**Reusability** (Header/Footer/Sidebar are connected once)
**Clean and modular code**
**Easy to manage navigation and visual style**
**Compatible with Vue Router and the Slot API**

---

## Summary

> **Layout Component** is a skeleton component that defines the basic structure of a page (header, sidebar, footer, content area).
>
> It is used to unify design, reduce code duplication, and conveniently place pages through `<slot>` or Vue Router.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.