Layout files (+layout.svelte) - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a +layout.svelte file in SvelteKit?

A +layout.svelte file defines a shared layout for all pages inside its folder. It helps keep common UI parts like headers, footers, or navigation consistent across multiple pages.

intermediate

How does SvelteKit use nested +layout.svelte files?

SvelteKit applies nested +layout.svelte files hierarchically. Inner layouts wrap their pages and also include outer layouts, allowing layered UI structures.

beginner

In a +layout.svelte file, what special slot is used to render child pages?

The <slot /> element is used inside +layout.svelte to show the content of child pages or nested layouts.

intermediate

Can you add scripts and styles inside +layout.svelte files? What is their scope?

Yes, you can add <script> and <style> inside +layout.svelte. The styles and scripts apply to the layout and all its child pages, helping share logic and design.

beginner

What happens if you remove the <slot /> from a +layout.svelte file?

If you remove the <slot />, child pages or nested layouts will not render inside that layout. The layout will show only its own content, hiding page content.

What file name does SvelteKit use for layout components?

A +layout.svelte

B layout.svelte

C Layout.svelte

D page.svelte

SvelteKit uses the exact file name +layout.svelte to identify layout components.

Where should you place a +layout.svelte file to affect all pages in a folder?

A Inside that folder

B In the root folder only

C In a sibling folder

D Anywhere in the project

A +layout.svelte file affects pages inside the folder where it is placed and its subfolders.

Which element inside +layout.svelte renders the child page content?

A <page />

B <child />

C <content />

D <slot />

The element is the placeholder for child page or nested layout content.

If you want to share a header across multiple pages, where should you put it?

A Inside each page

B In a separate component only

C Inside +layout.svelte

D In a script tag

Putting the header inside +layout.svelte shares it across all pages using that layout.

What happens if you have nested +layout.svelte files?

A Only the outermost layout is used

B Layouts wrap each other in folder hierarchy

C Only the innermost layout is used

D Layouts conflict and cause errors

Nested +layout.svelte files wrap their child pages and layouts, layering UI.

Explain how +layout.svelte files help organize page layouts in SvelteKit.

Think about how you keep common parts like headers consistent.

Describe what happens if you forget to include in a +layout.svelte file.

Consider the placeholder role of <slot />.

Practice

1. What is the main purpose of a +layout.svelte file in a SvelteKit project?

easy

A. To style individual components only.

B. To create a standalone page without any shared content.

C. To define a shared wrapper for multiple pages using a <slot />.

D. To write backend server code for the app.

Solution

1. Step 1: Understand the role of +layout.svelte

   The +layout.svelte file is used to wrap multiple pages with shared content like headers or footers.

2. Step 2: Recognize the use of <slot />

   The <slot /> inside +layout.svelte marks where the page content will appear inside the layout.

3. Final Answer:

   To define a shared wrapper for multiple pages using a <slot />. -> Option C

4. Quick Check:

   Layout files wrap pages with shared parts = D [OK]

Hint: Layouts wrap pages with to share content [OK]

Common Mistakes:

• Thinking layout files are for backend code
• Confusing layout with individual page components
• Not using inside layout files

2. Which of the following is the correct way to include page content inside a +layout.svelte file?

easy

A. <slot />

B. <div>Content</div>

C. <script>export let content;</script>

D. <page />

Solution

1. Step 1: Recall how layouts insert page content

   Layouts use the <slot /> element to mark where child page content appears.

2. Step 2: Check each option

   Only <slot /> correctly inserts page content inside a layout.

3. Final Answer:

   <slot /> -> Option A

4. Quick Check:

   Page content goes inside in layouts = A [OK]

Hint: Use to insert page content in layouts [OK]

Common Mistakes:

• Using <div> instead of for page content
• Trying to pass content via script props
• Using non-existent tag

3. Given this +layout.svelte file:

<header>Site Header</header>
<slot />
<footer>Site Footer</footer>

And a page with content:

<h1>Welcome</h1>

What will the rendered output be?

medium

A. Site HeaderWelcomeSite Footer

B. WelcomeSite HeaderSite Footer

C. Site HeaderSite Footer

D. Welcome

Solution

1. Step 1: Understand layout structure

   The layout wraps content with header and footer, placing page content where <slot /> is.

2. Step 2: Insert page content at slot

   The page's <h1>Welcome</h1> replaces the <slot /> in the layout.

3. Final Answer:

   <header>Site Header</header><h1>Welcome</h1><footer>Site Footer</footer> -> Option A

4. Quick Check:

   Layout header + page content + footer = B [OK]

Hint: Page content replaces in layout output [OK]

Common Mistakes:

• Ignoring and missing page content
• Placing page content before header
• Only showing page content without layout parts

4. You created a +layout.svelte file but your pages show no content. What is the most likely cause?

medium

A. You used <slot></slot> instead of <slot />.

B. You forgot to include <slot /> in the layout file.

C. You named the file layout.svelte instead of +layout.svelte.

D. You placed the layout file inside the src/routes folder.

Solution

1. Step 1: Check layout file structure

   If <slot /> is missing, page content has no place to render inside the layout.

2. Step 2: Verify other options

   File naming and placement are important but missing <slot /> directly causes no page content to show.

3. Final Answer:

   You forgot to include <slot /> in the layout file. -> Option B

4. Quick Check:

   No means no page content shown = C [OK]

Hint: Always include in layouts to show page content [OK]

Common Mistakes:

• Using wrong file name but still expecting content
• Thinking is invalid (it's valid)
• Placing layout outside routes folder (usually okay if nested)

5. You want to create a layout that adds a navigation bar only for pages inside src/routes/dashboard. Where should you place the +layout.svelte file to achieve this?

hard

A. Inside src/routes/dashboard/dashboard.svelte as a layout.

B. Inside src/routes/+layout.svelte to affect all pages.

C. Inside src/+layout.svelte to affect all routes including dashboard.

D. Inside src/routes/dashboard/+layout.svelte to affect only dashboard pages.

Solution

1. Step 1: Understand layout file scope

   A +layout.svelte file affects all pages in its folder and subfolders.

2. Step 2: Choose folder for dashboard-only layout

   Placing +layout.svelte inside src/routes/dashboard limits the layout to dashboard pages only.

3. Final Answer:

   Inside src/routes/dashboard/+layout.svelte to affect only dashboard pages. -> Option D

4. Quick Check:

   Layout location controls which pages it wraps = A [OK]

Hint: Put +layout.svelte in folder to scope layout to that folder [OK]

Common Mistakes:

• Putting layout in root folder affects all pages
• Naming a page file as layout
• Placing layout outside routes folder