nested layouts don't work for routes using [...rest] parameters structure.

[nisarhassan12]

Describe the bug

We are looking to migrate our site from Next JS to Sveltekit.

In the routes directory, I have the following:

We're using a visual CMS that requires us to have the pages in the src/content directory in .md files.

In routes/[...slug]/+page.ts I'm importing all the markdown files and then returning the correct page data based on the slug parameter.

We want to use different layouts for different routes i.e /blog/something, /guides/abc and /customers/xyz will not only use routes/+layout.svelte but their specific layouts as well i.e routes/blog/+layout.svelte and so on.

I tried putting +layout.svelte in both routes/blog/+layout.svelte and routes/[...slug]blog/_layout.svelte but kit does not seem to use either as the layout for /blog/something

Reproduction

Please see the steps in the Describe the bug section I can't share the repo as it is private.

System Info

System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.81 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Firefox: 109.0.1
    Safari: 15.4
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.2 
    @sveltejs/adapter-static: ^1.0.6 => 1.0.6 
    @sveltejs/kit: ^1.5.2 => 1.5.2 
    svelte: ^3.54.0 => 3.55.1 
    vite: ^4.0.0 => 4.1.1

Severity

We can get around this as specified here #9068 (comment) but the developer experience is not gonna be in line with entire Svelte and Kit ecosystem DX.

[nisarhassan12]

Someone at the Svelte discord told me that I could do something like:

/routes
  /blog
    +layout.svelte
    [...slug]/+page.svelte

and then abstract what I have in routes/[...slug]/+page.ts in a helper and re-use that for the different page types but it will be a lot of repetitive stuff i.e creating [...slug]/+page.svelte with [....slug]/+page.ts for all the different categories.

we are gonna have many different page types. It would be great if kit adds support for it.

[dummdidumm]

I converted this to a discussion because it's not a bug and there's also no feature request which we can act on.

I suggest to do either what was suggested on Discord (it's only the files you need to duplicate, you can create a common Svelte and load file from which you just import the things you need), or the following:

Inside your +layout.svelte you create the logic that checks which of the categories it is based on the params object. You then display one of the specific layouts.

<script>
  import { page } from '$app/stores';
  $: category = $page.params?.split('/')[0];
</script>

<div>
  <h2>Main layout stuff</h2>
  {#if category === 'blog'}
     <h3>Category layout stuff</h3>
     <slot />
  {:else if category === ...
</div>

[nisarhassan12]

Thanks for the quick response.

Inside your +layout.svelte you create the logic that checks which of the categories it is based on the params object. You then display one of the specific layouts.

Regarding this approach, the layout is not server-rendered. Do you know how one might achieve SSR when determining the layout in the root +layout.svelte?

[dummdidumm]

I'm not sure I follow. Determining the layout and rendering one or the other should work the same for SSR.

[nisarhassan12]

Sorry for not being clear enough.

The following would only have an impact on the client i.e category via $page.params is determined in the browser

+layout.svelte

<script>
  import BlogLayout from '$lib/components/blog-layout.svelte';
  import { page } from '$app/stores';
  $: category = $page.params?.split('/')[0];
</script>
 
{#if category === 'blog}
  <BlogLayout>
    <slot />
  </BlogLayout>
{/if}

+blog-layout.svelte

<div id="post">
  <slot />
</div>

The slotted contents will get server rendered but not the <div id="post"> I verified this via viewing the page source. Does this make sense?

[nisarhassan12]

Never mind I was able to render the <div id="post"> on the server via +layout.ts i.e I returned url.pathname as follows:

+layout.ts

export const prerender = true;

export const load = ({ url }: any) => {
	const currentRoute = url.pathname

	return {
		currentRoute
	}
}

and later accessed in +layout.svelte via the data prop.