Make child/nested layout not inherit parent layout

Question

I want to render child route with child layout only, without inheriting root layout.

/routes/+layout.svelte
/routes/child/+layout.svelte
/routes/child/+page.svelte

I tried child/[email protected] to break inheritance, but with no luck. I don't want to use layout groups or if-else statements in parent layouts.

Is there option to break parent inheritance in elegant way?

Answer 1

As Stephane has mentioned in comment, you need layouts group. To quote the docs on breaking out of layouts:

If you want some pages to have a different layout hierarchy than the rest, then you can put your entire app inside one or more groups except the routes that should not inherit the common layouts.

In example below home page / will use layout from (app) folder, but /admin will not inherit it.

src/routes/
│ (app)/
│ ├ dashboard/
│ ├ +page.svelte
│ └ +layout.svelte
├ admin/
└ +page.svelte

Read more here https://kit.svelte.dev/docs/advanced-routing#advanced-layouts-group