Feature request: Reset layout inheritance in nested routes

Is your feature request related to a problem? Please describe.

When building a website I want pages to share a specific layout with common UI elements like a navigation, sidebar, footer, etc. Other pages might want to use different layouts like a custom landing page. This works fine as long as my landing page is not a sub page of an existing page with layout.

** MY SHOP **
src/routes
├── bikes
│   ├── _layout.svelte
│   ├── category
│   │   └── index.svelte
│   └── [slug]
│       ├── index.svelte
│       └── _layout.svelte

In this example /bikes has a custom layout. Individual bike routes like /bikes/fancy-bike-3000 add their own layout and inherit the one from /bikes.

The problem appears when I want to make a super fancy landing page to promote all my mountain bikes. This page is completely individual and uses its own layout.

  ** MY SHOP **
  src/routes
  ├── bikes
  │   ├── _layout.svelte
  │   ├── category
  │   │   ├── index.svelte
+ │   │   └── mountain-bikes-promo
+ │   │       └── index.svelte
  │   └── [slug]
  │       ├── index.svelte
  │       └── _layout.svelte

/bikes/category/mountain-bike-promo will always inherit the layout from /bikes, but in this case it’s not wanted.

Sapper needs a feature to bail out of the layout inheritance and let sub pages define their own layouts.

Describe the solution you’d like I would like an API that allows me as developer to get more flexibility when needed but has the layout inheritance by default.

Ideas:

• Use a special prop in layout components, that tell Sapper to not include layouts up in the file tree. Maybe something like this:

<!-- _layout.svelte -->
<script>
  export let inherit = false;
</script>

• Nuxt.js has a layout/ folder with custom layouts that you can specify in your page (https://nuxtjs.org/api/pages-layout). This probably doesn’t work well with the current inheritance model but I like it.

/* vue code */
export default {
  layout: 'blog',
  // OR
  layout (context) {
    return 'blog'
  }
}

Describe alternatives you’ve considered

In the end it’s always possible to import layout components like any other component on every page. This provides full flexibility but can be a bit cumbersome if something like the inheritance model already exists.

A different solution could be to structure routes differently but a site structure should ideally not be constrained by the framework of choice.

How important is this feature to you?

I think this is a use case every application of a particular size will eventually run into. May it be custom landing pages or interactive stories with data visualizations.

Additional context

There was a former discussion in this issue https://github.com/sveltejs/sapper/issues/809.
The idea to hide elements in a root layout based on segment doesn’t really work since not the full route is available. Looking at my example bikes/_layout.svelte has segment === "category" but mountain-bike-promos is needed to know if layout components need to be hidden.

---

I look forward to any API discussion and can maybe come up with an implementation if this is a feature you want to integrate into Sapper.

[Florian-Schoenherr]

A Huge thanks! @Rich-Harris 🎉 🎉

[joelhickok]

I really like the _reset.svelte approach.

I am amazed Sapper does not yet have the ability to use multiple layouts.