Exclude a page from _layout

Question

Hello I am new to Svelte, Sapper & Express.

The problem:
I am using Sappers _layout.html to display 2 components (header & menu) that should be displayed on all pages, save for the login page.

What is the right way to achieve this ?

Possible solutions:
A) Serve the login page from the static folder, and use the express middleware to route to it?

B) Have the login as the root of my project and move all other routes down a level so they can share a common layout that dosnt involve the login page?

C) Put and if statement in the layout and determine when the user is on the login page to hide the header & menu components.

D) Not use the layout to display the components.

Brandeebranden

Answer 1

My preferred solution to this problem is option C — using child.segment to control which layout is used:

<!-- src/routes/_layout.html -->
{#if child.segment === 'login'}
  <svelte:component this={child.component} {...child.props}/>
{:else}
  <div class="fancy-layout">
    <svelte:component this={child.component} {...child.props}/>
  </div>
{/if}

K

Where does the child.segment come from? I see it is exported in github.com/sveltejs/realworld/blob/master/src/routes/… but I don't know where to set it's value. Thanks – Kirven

@Kirven The segment prop is set magically by Sapper when you navigate thru the routes. See Sapper docs. – Weatherspoon

Since this answer is from 2018, this should probably be updated: child.segment is only segment now, as @Weatherspoon pointed out. And the whole <svelte:component> line is now <slot/> – Triad

Can you post new answer for svelte-kit, this OP solution doesn't work. – Rosario

I get segment is not defined in svelte-kit – Rosario

@Rosario SvelteKit is different from Sapper, see migration guides. In Kit you can use page store to get segment trickily via url.pathname. But if you need conditionally render element/component based on user login, I suggest to use session store instead. – Weatherspoon

Answer 2

Just adding a similar answer as the accepted one, but with updated syntax for SvelteKit as of early 2022 (still in beta).

<!-- src/routes/__layout.svelte -->

<script>
import { page } from '$app/stores'
</script>

{#if $page.url.pathname === '/fancy'}
  <div class="fancy-layout">
    <slot />
  </div>
{:else}
  <slot />
{/if}

Straightout

Answer 3

I recognize that it might not always be the best solution, but the intended solution to use different layouts/no layout on some pages is by creating different route groups using folders named (like-this):

src/routes/
│ (default)/    <-- In this folder you put all your ordinary routes.
│ ├ dashboard/
│ ├ item/
│ └ +layout.svelte  
│ (no-layout)/  <-- In this folder you put the routes that shouldn't use a layout.
│ ├ sign-in/

Primrose