Що таке "layout component"?

VueJunior~1 хв читання

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>

<script setup>
import Header from './Header.vue'
import Footer from './Footer.vue'
</script>

<style scoped>
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex: 1;
  padding: 20px;
}
</style>

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

javascript

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

<script setup>
import MainLayout from '@/layouts/MainLayout.vue'
</script>

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

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

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

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

Приклад:

javascript

<!-- AuthLayout.vue -->
<template>
  <div class="auth-layout">
    <slot></slot>
  </div>
</template>

<style scoped>
.auth-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</style>

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

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.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.