how to handle reset layout?

Question

I'm now getting this error:

__layout.reset has been removed in favour of named layouts: https://kit.svelte.dev/docs/layouts#named-layouts

I have a sub-directory for which I do not want to inherit the base layout.

$ find . -name '*layout*'               
./setup-profile/__layout.reset.svelte
./auth/__layout.reset.svelte
./__layout.svelte

package.json has

    "@sveltejs/kit": "next",

Thomas Hennes · Answer 1 · 2022-04-07T23:36:33.347

8

The doc page you linked is pretty self-explanatory.

Edit:

Overall the simpler way is to create a named reset layout at the root of your source tree containing a simple <slot />, and reference that layout whenever you want to start from a reset layout:

src/routes/
├ auth/
│ ├ __layout@reset.svelte (will inherit from the reset layout)
│ ├ pageA.svelte
│ └ pageB.svelte
├ setup-profile/
│ ├ __layout@reset.svelte (will inherit from the reset layout)
│ ├ pageA.svelte
│ └ pageB.svelte
├ no-reset/
│ ├ __layout.svelte (will inherit from the base layout)
│ ├ pageA.svelte
│ └ pageB.svelte
├ __layout.svelte
└ __layout-reset.svelte

edited Apr 07 '22 at 23:36

answered Apr 07 '22 at 23:19

Thomas Hennes

9,023
3
27
36

1

`> Files and directories prefixed with __ are reserved (saw src/routes/__layout-reset.svelte)` – chovy Apr 08 '22 at 09:56
1

had to remove `package-lock.json` and `node_modules` – chovy Apr 08 '22 at 10:00
This explanation helps exactly the behaviour I am seeing, so thanks. The confusion is that the docs say: "Ordinarily, this would inherit the root layout, the (app) layout, the item layout and the [id] layout. We can reset to one of those layouts by appending @ followed by the segment name" which to me reads the opposite behaviour https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-breaking-out-of-layouts – aroundtheworld Apr 10 '23 at 09:08
@aroundtheworld glad I could help a bit, but keep in mind my answer above is obsolete if you are using more recent versions of SvelteKit where routing conventions have been updated! However if you have a specific question or need regarding the use of layouts I'd be able to assist if I can. – Thomas Hennes Apr 10 '23 at 12:17
thanks @ThomasHennes, i am using svelte 3.5.4 - using groups, noticing that routes/(app)>layout.svelte is taken by every child +page. As the docs read, it sounded like using the +page@[id].svelte meant the root or (app) layout was not taken (ie, 'reset') but actually as it is described in your post still holds, as far as I can see – aroundtheworld Apr 10 '23 at 12:54

Big_Boulard · Accepted Answer · 2022-10-11T17:10:05.390

This doesn't work anymore as the routing system evolved.

My understanding is that:

all layout inherit from the root layout +page.svelte
but you can create groups which are not taken into account in the final path of your route.

For example, we can imagine that a website has a layout containing a header, a main and a footer block.

But we may also have some king of popups that are not comprised of these block elements, but instead, they are simple blocks with a high z-index or something like this.

Because all layouts inherits the root layout, we can just create a blank layout at the root (containing a single <slot />), and then, we create an (app) group and a (popup) group (parenthesis are crucial here). And inside of each group, you define the layout that will be inherited by all the layouts located in the respective sub folders.

It would gives us something like below:

src/routes
├── (app)
│   ├── +layout.svelte ----> contains Header, Main, Footer etc.
│   ├── page1
│   │   └── +page.svelte
│   ├── page2
│   │   └── +page.svelte
│   ├── page3
│   │   └── +page.svelte
├── (popup)
|   ├── +layout.svelte ----> contains only popup HTML & styles
│   ├── popup
│       └── popup1
│       │   └── +page.svelte
│       └── popup2
│           └── +page.svelte
├── (test)
│   ├── +layout.svelte
│   └── test
│       ├── +layout.svelte
│       └── page.svelte
├── +error.svelte
├── +layout.svelte  ----> contains nothing or only global things
├── +page.svelte
└── api
    ├── user
    │   └── [uid]
    │         └── get.json
    └── ...
...

This was useful and helped a lot. – Hillborn Nov 02 '22 at 07:03 — Hillborn, Nov 02 '22 at 07:03

score 2 · Answer 3 · answered Sep 08 '22 at 17:08

2

i recommed you using (group), may this help you

how to handle reset layout?

4 Answers4

Linked