Reset Layout in Svelte

In SvelteKit, you can create a page layout file called __layout.svelte, which acts as a shell for each child page.

Here is a simple example layout:

<script>
    import Navbar from '$lib/Navbar.svelte';
    import Footer from '$lib/Footer.svelte';
</script>

<Navbar />

<slot />

<Footer />

Each child page of that __layout.svelte file will be inserted in the place of the slot tag.

For example, if this __layout.svelte file were placed in the /example/ folder, the contents of /example/index.svelte would be inserted where the slot tag is.

You can also nest layouts within parent layouts. However, sometimes, you might want to reset a layout entirely. Maybe you don’t want /example/foo/bar.svelte to have a navbar or footer.

So to reset a layout without inheriting a parent layout, simply change the file name from __layout.svelte to __layout.reset.svelte.

Conclusion

And that’s how you reset a layout in SvelteKit!