Nested Layouts

[brillout]

See https://vite-plugin-ssr.com/layouts#nested-layouts.

While the workaround works, its DX isn't ideal.

[Jearce]

This feature would be great to use in my current project. Currently, using the solution given here. Thank you!

[brillout]

@Jearce Thanks for the comment! I'm busy with high prio things at the moment (e.g. bug/design fixes), but let me know if/when the current situation is getting too annoying for you. I'll then implement this.

[taylorfsteele]

+1 to this DX enhancement and parallel onBeforeRender() calls. Working on a project using the solution in the docs like @Jearce, but would still be a nice feature. Thanks!

[brillout]

FYI I'm still thinking about this. The design I will come up with may be quite different from what others are doing. Stay tuned.

For (other) readers: feel free to further push for this by adding a comment here.

[brillout]

The overall design is starting to crystalize.

The Single Route File design will play a central role here.

Stay tuned.

As always, if this is urgent for someone, then definitely let me know!

[binajmen]

(I follow your request to comment, as I'm interested as well 😉)

Switching to something-not-React + vite-plugin-ssr, and coming from Remix, I can tell you a nested layout feature would be appreciated ;)

[CanRau]

I'm in the same boat, was missing Vite, or at least more configurability with Remix and React alternatives.

vite-plugin-ssr is definitely amazing though also missing some of Remix's simplicity 😇

[brillout]

For folks who need/want improved Nested Layouts, please PM on discord.

[MrQinYQ]

I want to use this feature. What should I do?

[brillout]

PM on discord

[nitedani]

The state of Page should be preserved on navigation to a sibling route. If it's a navigation to a sibling route, only swap out the pageContext.nested[0] in the context, don't run the client-side render entry.

[brillout]

Yes the pageContext is preserved, but the onBeforeRender() of the nested view is (re-)run and the whole page's onRenderClient (the upcoming new name for the client-side render() hook) is re-run.

[lutzissler]

Also interested – nested views using the render() solution is working but bad DX.

[rossanmol]

This feature would simplify a lot of things in my projects ;) Looking forward for it.

[brillout]

Also interested – nested views using the render() solution is working but bad DX.

This feature would simplify a lot of things in my projects ;) Looking forward for it.

Thanks for the push.

FYI it's slowy but surely creeping towards the top of the TODO list.

Sponsoring much welcome to give it a signficant bump to the top.

And, as always, feel free to let me know and elaborte when the workaround becomes painful. That definitely makes a difference in priority as well.

[pencilcheck]

Sound like a good idea to have this DX. Please support if possible. Thanks!

[brillout]

Closing in favor of improved docs https://vike.dev/Layout#nested-layouts and upcoming uproved DX #1459 (including deep integration with data fetching tools).