Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке "layout component"?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Layout Component (компонент-макет)** - це **компонент-обгортка**, який визначає **структуру (каркас) сторінки**:
наприклад, містить шапку (header), підвал (footer), бічну панель (sidebar) та зону для контенту.

Layout-компоненти **не відповідають за бізнес-логіку чи конкретні дані**,
а задають **зовнішній каркас і повторювані частини інтерфейсу** застосунку.

---

## 1. Основна ідея

Layout-компоненти дозволяють **уникнути дублювання** коду та **повторного рендеру** однакових елементів на кожній сторінці.

Наприклад, замість того щоб вставляти `Header` і `Footer` у кожен компонент вручну,
ми створюємо один `MainLayout.vue`, всередині якого розміщуємо загальний каркас та `<slot>` для контенту.

---

## 2. Приклад простого layout-компонента

### `MainLayout.vue`

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

---

### Використання layout-компонента

```javascript
<template>
  <MainLayout>
    <h1>Головна сторінка</h1>
    <p>Контент, який буде вставлено всередину layout через слот.</p>
  </MainLayout>
</template>

Все, що знаходиться всередині `<MainLayout>...</MainLayout>`
вставиться в `<slot>` компонента `MainLayout.vue`.

---

## 3. Декілька різних layout-компонентів

У реальних проєктах часто є **кілька макетів**:

- `MainLayout` - для звичайних сторінок;
- `AuthLayout` - для сторінок входу/реєстрації;
- `DashboardLayout` - для адміністративної панелі.

Приклад:

```javascript

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

Використання:

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

---

## 4. Layout + маршрутизація

Якщо використовується Vue Router, layout-компоненти можна підключати **через маршрути**:

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

Таким чином, різні сторінки можуть використовувати **різні макети** залежно від маршруту.

---

## 5. Переваги layout-компонентів

**Єдина структура сторінок**
**Можливість повторного використання** (Header/Footer/Sidebar підключаються один раз)
**Чистий і модульний код**
**Легко керувати навігацією та візуальним стилем**
**Сумісні з Vue Router та Slot API**

---

## Підсумок

> **Layout Component** - це компонент-каркас, що задає базову структуру сторінки (header, sidebar, footer, контентна область).
>
> Він використовується для уніфікації дизайну, зменшення дублювання коду та зручного розміщення сторінок через `<slot>` або Vue Router.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати378 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.