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 />.