How SvelteKit layouts works

When working with component like projects, certain components get repeated across pages, such as navigation bar, footer, etc. And what I normally do is to import them across all the pages.

But that they may get hard to maintain as the project grows with severals 10s and hundreds of pages. I wondered if there is an easier way to share common Svelte components across many pages.

The answer is, yes! SvelteKit has a reserved component called __layout.svelte that can be used inside the routes directory.

__layout.svelte – This component will help share common HTML elements or Svelte components across many SvelteKit pages found in the same root or nested levels.

First, if you’re looking to become a strong and elite Svelte developer within just 23 easy video courses, you might want to look into Level Up Tutorials, What is Svelte Kit for just $49.99. With giant tech companies such as Apple, and Spotify now hiring for svelte developers, wouldn’t it be nice to get ahead of everyone else? Level Up Tutorials will make you into an elite Svelte developer, and will teach you the skillset for you to have the confidence to start applying for Svelte developer positions.

Click here to become a strong and elite Svelte developer: What is Svelte Kit

Disclaimer: The two What is Svelte Kit course links are affiliate links where I may receive a small commission for at no cost to you if you choose to purchase a plan from a link on this page. However, these are merely the course I fully recommend when it comes to becoming a Svelte engineer expert.

Let’s go over how this works.

Step 1: Create __layout.svelte component

Inside the ‘routes’ directory, create a file called __layout.svelte and insert the slot element for the page content.

<nav>
  <a href="/dashboard">Dashboard</a>
  <a href="/profile">Profile</a>
  <a href="/settings">Settings</a>
</nav>

<slot></slot>

Let’s do a code recap! The code above is saying that all SvelteKit pages will have this navigation markup.

The page content will appear where ever the <slot /> component is placed.

Step 2: Create SvelteKit pages

Now let’s create the dashboard, profile, and settings page!

<h1>Dashboard</h1>

<h1>Profile</h1>

<h1>Settings</h1>

When you run npm run dev on your terminal, you can visit each individual page and see the navigation menu above the <h1> element.

This is a great method to share common HTML elements or Svelte components.

But what if you’re building a Svelte application with authentication in mind.

Can you specify a __layout.svelte component per page? The answer is yes! you can create named layouts.

Let’s see how to create named layouts for specific pages.

Creating a named layout for specific page

Let’s say you want to create two different layouts. One for public facing pages and another for authenticated pages.

In the routes directory go ahead and create two files named __layout-public.svelte, and __layout-auth.svelte.

<nav>
  <a href="/dashboard">Dashboard</a>
  <a href="/profile">Profile</a>
  <a href="/settings">Settings</a>
</nav>

<slot></slot>

<nav>
  <a href="/">Home</a>
  <a href="/About">About</a>
  <a href="/pricing">Pricing</a>
</nav>

<slot></slot>

You’ll notice that I’ve added -{namespace} to the file name. This is what you will do to reference the layout name to a specific page.

Now let’s update the page filename to reference the authenticated layout.

/src/routes/dashboard@auth.svelte
/src/routes/dashboard@profile.svelte
/src/routes/dashboard@settings.svelte

And now let’s create a couple public facing SvelteKit pages:

/src/routes/index@public.svelte
/src/routes/about@public.svelte
/src/routes/pricing@public.svelte

All you need to do to reference a layout is to add the at sign (@) and the namespace of the layout.

When you run your local environment, you will notice that each route will have a different navigation, depending on the layout name that it’s referencing.

Unexpected error: reserved prefix with __

You might come across this error message when creating named layouts:

Files and directories prefixed with __ are reserved (saw src/routes/auth/__layout-auth.svelte)

To solve this problem make sure to be using @sveltejs/kit@1.0.0-next.350 or newer.

I like to tweet about Svelte and post helpful code snippets. Follow me there if you would like some too!