Search code examples
frameworkssveltekit

How to reset a layout in svelte/kit with vite


If I have a main layout "+layout.svelte" at /routes and then try to reset the layout at /routes/auth/login It is not working.

  • If the name is "+layout.svelte" the layout is embedding inside the main layout.
  • If the name is "[email protected]" it's not working.
  • If the name is "+layout.reset.svelte" its: Error: Files prefixed with + are reserved.

Because the default configuration of svelte/kit is vite. I think they changed it, but I don't know how to do it.

Only thing I can find in the docs about resetting layouts.

At: kit.svelte.dev/docs/advanced-routing#advanced-layouts-layout


Solution

  • Stuff has happened in the world since the accepted answer was posted. This is also true for Svelte/kit. Now there is something called (group) that looks like this:

    src/routes/
    │ (app)/
    │ ├ dashboard/
    │ ├ item/
    │ └ +layout.svelte
    │ (marketing)/
    │ ├ about/
    │ ├ testimonials/
    │ └ +layout.svelte
    ├ admin/
    └ +layout.svelte 
    

    This lets you group layouts in directories that has its name wrapped in parenthesis (that don't affect the routing). Here a +layout.svelte file inside such a directory will add to the src/+layout.svelte file - this layout wraps all other layout files defined in grouped directories.

    Once you wrap your head around it, it is very easy to use. Read more about it in the documentation for advanced routing / advanced layouts