Layout files (+layout.svelte) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a layout component that wraps page content.

Svelte

<script>
  export let [1];
</script>

<main>
  <slot />
</main>

Drag options to blanks, or click blank then click option'

Adata

Bpage

Ccontent

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'children' which is common in React but not in SvelteKit.

Using 'page' which refers to the $page store, not a prop.

Using 'content' which is not a standard prop here.

In SvelteKit, the +layout.svelte file automatically wraps pages. The data prop is commonly used to access data from the load function.

2fill in blank

medium

Complete the code to include a navigation bar inside the layout.

Svelte

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

[1]

Drag options to blanks, or click blank then click option'

A<content />

B{page}

C<slot />

D<children />

Attempts:

3 left

💡 Hint

Common Mistakes

Using React-like {page} or <children /> which are not valid in Svelte.

Using <content /> which does not exist in Svelte.

The <slot /> tag is used in Svelte layouts to render the child page content inside the layout.

3fill in blank

hard

Fix the error in the layout script to correctly import a component.

Svelte

<script>
  import Header from '[1]';
</script>

<Header />
<slot />

Drag options to blanks, or click blank then click option'

A./Header.svelte

BHeader.svelte

C/Header.svelte

Dheader.svelte

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the ./ prefix causes import errors.

Using uppercase or lowercase inconsistently in file names.

Relative imports in Svelte use ./ to refer to files in the same folder. So ./Header.svelte is correct.

4fill in blank

hard

Fill both blanks to create a layout that applies a CSS class and includes page content.

Svelte

<div class="[1]">
  [2]
</div>

Drag options to blanks, or click blank then click option'

Alayout-container

B<slot />

C<content />

Dcontainer

Attempts:

3 left

💡 Hint

Common Mistakes

Using <content /> which is not valid in Svelte.

Leaving the class attribute empty or invalid.

The class attribute should have a valid CSS class name like layout-container. The <slot /> tag inserts the page content.

5fill in blank

hard

Fill all three blanks to create a layout with a header, main content slot, and footer.

Svelte

<header>[1]</header>
<main>[2]</main>
<footer>[3]</footer>

Drag options to blanks, or click blank then click option'

A<Header />

B<slot />

C<Footer />

D<Content />

Attempts:

3 left

💡 Hint

Common Mistakes

Using <Content /> which is not a standard Svelte slot or component.

Forgetting to include the <slot /> for page content.

The layout includes a <Header /> component, a <slot /> for page content, and a <Footer /> component.

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