[docs] explain how to break out of root layout #7617
Conversation
|
Co-authored-by: gtmnayan <50981692+gtm-nayan@users.noreply.github.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
There was a problem hiding this comment.
This honestly feels rather duplicative to me — can't we add remarks to the existing sections? The (group) section already includes an /admin route which would be a perfect example of this, and the page@ section is all about breaking out of the layout hierarchy, so it feels like a more appropriate venue for this
| #### Breaking out of the root layout | ||
|
|
||
| There is no way to break out of the root layout. You can be sure that it's always present in your app and for example put app-wide UI or behavior in it - and if you don't define one, it falls back to a simple `<slot />` component. If you want some pages to _not_ have the same layout as the rest, then you have two options: |
There was a problem hiding this comment.
We need to phrase this differently — it's framed as a limitation rather than a deliberate design choice, and it's weird to have a 'how to do X' section that begins 'you can't'
| #### Breaking out of the root layout | |
| There is no way to break out of the root layout. You can be sure that it's always present in your app and for example put app-wide UI or behavior in it - and if you don't define one, it falls back to a simple `<slot />` component. If you want some pages to _not_ have the same layout as the rest, then you have two options: | |
| #### Ignoring all layouts | |
| The root layout applies to every page of your app. If you want some pages to _not_ have the same layout as the rest, then you have two options: |
There was a problem hiding this comment.
I phrased it specifically that way because on Discord people phrase their questions more around "breaking out of" than "ignoring" - but I agree that it's somewhat clunky the way I've written it.
| Option 2: Add an exception to your root `+layout.svelte` where you don't render the surrounding UI on specific pages: | ||
|
|
||
| ```svelte | ||
| /// file: src/routes/+layout.svelte | ||
| <script> | ||
| import { page } from '$app/stores'; | ||
| </script> | ||
|
|
||
| {#if $page.url.pathname !== '/login'} | ||
| <slot /> | ||
| {:else} | ||
| <div>Surrounding UI</div> | ||
| <slot /> | ||
| {/if} | ||
| ``` |
There was a problem hiding this comment.
I feel like this is a pattern we don't really want to promote — it's the sort of thing that can get out of hand quite quickly, and it introduces sort of a mismatch between the UI code (which has if statements) and data fetching code (which doesn't). It also defeats code-splitting — in a more realistic example, one of the branches would use a component, which we'd be importing in both cases
There was a problem hiding this comment.
For simplicity's sake I think this solution is actually perfectly fine for a number of use cases. I agree though that this gets out of hand at some point, so we should point that out.
There was a problem hiding this comment.
Just remembered this bug: #2527
We absolutely don't want to encourage this pattern
The |
|
I had a crack at a shorter version in #7651 |
|
Closing in favor of #7651 |
This comes up so often on Discord etc that it warrants its own section with some explanatory content.
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
Tests
pnpm testand lint the project withpnpm lintandpnpm checkChangesets
pnpm changesetand following the prompts. All changesets should bepatchuntil SvelteKit 1.0