What is a "layout component"?

VueJunior~1 min read

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> <!-- page content is inserted here -->
    </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>

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>

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

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

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

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.

Short Answer

Interview ready

Premium

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