Nested Layouts DX is pretty difficult

[Blankeos]

Concerns

I did a bit more reading with Nested Layouts. The DX for layouts is kind of difficult :((. Is it possible to make it work a bit more like SvelteKit and NextJS?

Currently to do Nested Layouts:

• You don't use +Layout (because it overrides by default).
• You have to use +route.tsx to define routeParams?
• You have to use +Page.tsx that will act as a "Layout" and define the nested pages there as well?
• On top of this, to make it work, you have to have predefined strings and check the pageContext.view AND <a href="..." keep-scroll-position />.

I don't know, it just doesn't feel cohesive. Right now, I think this is one huge deal-breaker for me to use Vike :(

Suggestions

I know Vike users don't prefer Next or other metaframeworks. I still think NextJS and SvelteKit nailed the DX for file-system routing really well. Here are some features that Vike currently lacks that can't replicate what you can do in Next:

1. Should be able to make nested layouts without getting overridden:

Currently by default, using pages/route/+Layout inside another page will override the pages/+Layout on the root. The override should probably be opt-in? Maybe a special file name for it like: +LayoutOverride.tsx while for the +Layout, it should work exactly like in NextJS or SvelteKit:

Example:

• pages/+Layout.tsx - Should be the root layout.

• pages/my-route/+Layout.tsx - Should be the nested layout inside my-route

  // my-route's markup
  <RootLayout>
     <MyRouteLayout>
        {children}
     </MyRouteLayout>
  </RootLayout>

2. Should be able to make folder structures using parenthesis so they're ignored as paths:

This is useful for route grouping without affecting paths + grouping nested layouts without affecting paths.

When parenthesis is there:

• pages/(horizontal)/settings/+Page.tsx is equivalent to /settings
• pages/(horizontal)/dashboard/+Page.tsx is equivalent to /dashboard

Normally:

• pages/horizontal/settings/+Page.tsx is equivalent to /horizontal/settings
• pages/horizontal/dashboard/+Page.tsx is equivalent to /horizontal/dashboard

Let me know your thoughts!

[Blankeos]

In SvelteKit, this is how I usually address this need (issue#1583) for "non-cumulative" layouts:

wherein (website) is the landing page and (app) is the dashboard.

[brillout]

Regarding (app) and (website), have you seen https://vike.dev/filesystem-routing#domain-driven-file-structure?

I agree that the succinctness of () is nice. Much better than https://vike.dev/filesystemRoutingRoot.

[brillout]

Quick spontaneous reaction: would making +Layout cumulative resolve your issues?

I'll think more about your feedback later.

[Blankeos]

Thanks for the quick reply as always @brillout! Yes it would. I'll also try to make this clear with some pictures and videos:

Usecase why I need cumulative layouts. With the currently implementation, it's super difficult to this:

1. Vertical Layout for the Landing Page

• /pricing, /about, /faq, /login, /register pages that use that layout.

2. Horizontal Layout for the Dashboard Page

• /local, /settings, /profile, /feed pages. (that don't have a /dashboard prefix)

In Vike, I would probably need to have a folder structure like this:

pages/
├── +Layout.tsx # RootLayout holds auth context.
├── landing/
│   ├── +Layout.tsx # HorizontalLayout has to rerun auth context here.
│   ├── about/+Page.tsx
│   ├── faq/+Page.tsx
│   ├── login/+Page.tsx
│   ├── register/+Page.tsx
│   └── pricing/+Page.tsx
└── app/
    ├── +Layout.tsx # VerticalLayout has to rerun auth context again here.
    ├── settings/+Page.tsx
    ├── profile/+Page.tsx
    └── feed/+Page.tsx

But a few tricky things with this:

• I'm forced to put /landing/about /landing/faq and /landing/login just for the "Landing Page" pages.
• I have to re-run the Auth Context for other layouts because I can only have 1 Layout for every page (which means there's no Root layout that can hold the important contexts that should be shared across all pages). - I did read about Wrapper but the docs don't really cover it that much and vike-solid doesn't seem to have it I think.
• If I have shared state/signals that should persist between layout changes, I can't do that either.

Here's a demonstration of this in the Vike + Solid app I'm working on:

why.cumulative.layouts.are.needed.mp4

[Blankeos]

@brillout I tried porting everything to Solid Start to see if it makes a difference just so I can demonstrate it to you maybe.

vike.vs.solid.start.mp4

Here are the codebases for both by the way:

• Vike: http:https://github.com/blankeos/solid-launch
• SolidStart: https://github.com/blankeos/solid-launch-start
• SvelteKit: https://github.com/blankeos/svelte-launch

[brillout]

Let me know if I'm missing something, but I think the conversation can be wrapped up in the following three feature requests:

• [Filesystem Routing] Syntax for ignoring directories #1684
• Make Layout cumulative vike-react#119
• [Filesystem Routing] Nested routes with sticky scrolling #1685

[brillout]

Done: https://vike.dev/Layout#nested-layouts.

I went ahead and marked this reply as answer but feel free to disagree.