How to Create Layout in SvelteKit: Simple Guide

In SvelteKit, create a reusable layout by adding a +layout.svelte file in your routes folder. This file wraps all pages in that folder, letting you define common headers, footers, or navigation that appear on multiple pages.

Syntax

The layout file in SvelteKit is named +layout.svelte and placed inside a route folder. It wraps all child pages and layouts. Inside, you use the <slot /> tag to show the content of the child page or nested layout.

Parts explained:

• +layout.svelte: The layout component file.
• <slot />: Placeholder for child page content.
• Folder structure: Determines which pages the layout applies to.

svelte

<!-- +layout.svelte -->
<script>
  // Optional script for layout logic
</script>

<header>
  <h1>Site Header</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <slot />
</main>

<footer>
  <p>© 2024 My Site</p>
</footer>

Output

A page with a header, navigation links, the page content in the main area, and a footer.

Example

This example shows a simple layout wrapping two pages: Home and About. The layout adds a header and footer around the page content.

svelte

// File structure:
// src/routes/+layout.svelte
// src/routes/+page.svelte
// src/routes/about/+page.svelte

// src/routes/+layout.svelte
<script>
  // No special logic needed here
</script>
<header>
  <h1>My Website</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <slot />
</main>
<footer>
  <p>© 2024 My Website</p>
</footer>

// src/routes/+page.svelte
<h2>Welcome to the Home Page</h2>
<p>This is the main landing page.</p>

// src/routes/about/+page.svelte
<h2>About Us</h2>
<p>Learn more about our site here.</p>

Output

When visiting '/', you see the header, 'Welcome to the Home Page' content, and footer. When visiting '/about', you see the same header and footer with 'About Us' content in the middle.

Common Pitfalls

Common mistakes when creating layouts in SvelteKit include:

• Forgetting to include <slot /> in +layout.svelte, which causes child pages not to render.
• Placing +layout.svelte in the wrong folder, so it doesn't apply to intended pages.
• Trying to use +layout.svelte as a normal page without slots.

svelte

<!-- Wrong: Missing slot, child page content won't show -->
<header>Header only</header>
<!-- No <slot /> here -->
<footer>Footer only</footer>

<!-- Right: Include slot to render child pages -->
<header>Header</header>
<main><slot /></main>
<footer>Footer</footer>

Output

Without <slot />, child page content is invisible; with <slot />, child content appears inside the layout.

Quick Reference

Tips for using layouts in SvelteKit:

• Name your layout file +layout.svelte.
• Use <slot /> to show child content.
• Place layouts in folders to scope them to routes.
• Layouts can be nested by adding +layout.svelte files in subfolders.
• Use +layout.ts or +layout.js for layout data loading if needed.

Key Takeaways

Create a +layout.svelte file in your route folder to define a layout.

Always include in your layout to render child page content.

Layouts wrap all pages in their folder and can be nested for complex structures.

Use folder structure to control which pages use which layouts.

Layouts can include headers, footers, navigation, or any shared UI elements.