5

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",

4 Answers 4

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/
│ ├ [email protected] (will inherit from the reset layout)
│ ├ pageA.svelte
│ └ pageB.svelte
├ setup-profile/
│ ├ [email protected] (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
5
  • 1
    > Files and directories prefixed with __ are reserved (saw src/routes/__layout-reset.svelte)
    – chovy
    Apr 8, 2022 at 9:56
  • 1
    had to remove package-lock.json and node_modules
    – chovy
    Apr 8, 2022 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 kit.svelte.dev/docs/… Apr 10 at 9: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. Apr 10 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 Apr 10 at 12:54
5

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
    └── ...
...
1
  • 1
    This was useful and helped a lot.
    – Hillborn
    Nov 2, 2022 at 7:03
2

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

read more

0

According to my test, you need to rename layout & the file use layout.

e.g

l2_named/
    __layout-foo.svelte
    [email protected]

The layout file added -foo, and the file use layout added @foo.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.