Setting up a simple layout reset

[hubert-ix]

I've just updated to the latest version of SvelteKit. I was on 1.0.0-next.405, the last version before all the massive route changes, and my (sizeable) app is working fine on that version.

After running the migration tool and launching "npm run dev", the first error I get is for a reset layout I have somewhere in a route.

My layouts are pretty simple: I have one +layout.svelte at the root, and sometimes I need to completely reset it so that there's just a <slot />

The docs say:

For example, a [email protected] component would reset the hierarchy for all its child routes

So I've put a [email protected] file (with just <slot />) where I want the layout to reset, but it's telling me:

my-route/[email protected] references missing layout "

How shall I do a simple layout reset then?

[paulwvnjohi]

you can used groupings, https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-group

[coldino]

I'm in the same boat. I understand I can use groups as an alternative, but shouldn't this work as-is?

The docs say [email protected] should do what I expect, and yet I cannot use it at all due to the same error as above.

[mattcroat]

To reset a layout create a blank root layout +layout.svelte and then you can reference it using [email protected].

.
├── page/
│   ├── +page.svelte
│   └── [email protected]
└── +layout.svelte

[coldino]

Thanks, but it's looking like this wasn't the problem. A fresh SvelteKit project works using [email protected] even without an empty layout at the root.

For me, I didn't realise the automated migration to the new router wouldn't update the packages - so I ended up with a mixture of old/new design. Fixing this up has removed the error.

[louis-bourgault]

Thank you, that worked really well for me and so simple

[scottBowles]

Maybe I'm severely missing something, but I really can't figure out how to reset the layout.

I think I'm doing as suggested to remove the layout from the About page here: https://stackblitz.com/edit/sveltejs-kit-template-default-dnvpmm?file=src/routes/(about-group)/about/+page.svelte

I've also tried with the @ following the other layout file in the about-group folder, and with @ followed by various things in about/page.js (e.g., about/[email protected]).

[yousufiqbal]

This looks overkill for a simple reset. I'm getting these vibes for first time in SvelteKit. There should be a simpler solution. One should be able to live without groups and apply a reset as well.

[yousufiqbal]

Maybe a +layout.reset.svelte?

[hubert-ix]

@yousufiqbal I'm with you. I'm all for embracing change, but in practice the recent updates in sveltekit have proved to add a lot more work rather than simplifying things. At least that's been my experience so far.

[stephane-vanraes]

I fell back to the "old style" of checking the current route in an if clause in my root layout to differentiate when a page needs a new layout at that level. It adds a touch more code, but at least my route files are together instead of in two different subtrees.

While I understand the logic behind the "grouped layouts" to a point, it's a pity named layouts have been removed. Would like to see those making a comeback.

[Greenheart]

Thanks @stephane-vanraes! Your suggestion worked great - wrapping the root +layout.svelte in a conditional to render an empty layout for the routes that need it.

A pretty clean solution, and only minimal changes needed to make it work.

Layout groups and other advanced features are likely useful in larger projects, but for a simple static site, the if block is as simple as it can get. No need to introduce SvelteKit-specific directory structures and filenames when an if statement is enough :)