vike
vike copied to clipboard
vikejs
Nested Layouts
This should be fairly easy to implement; comment here if you need this and this will be implemented (ETA within a week).
The idea is to export const isNested = true in .page.route.js.
/pages/product/@id/index.page.js
/pages/product/@id/reviews.page.js
/pages/product/@id/reviews.page.route.js
/pages/product/@id/pricing.page.js
/pages/product/@id/pricing.page.route.js
// /pages/product/@id/reviews.page.route.js
export const isNested = true
// /pages/product/@id/pricing.page.route.js
export const isNested = true
// /pages/product/@id/index.page.js
// The parent page
export function Page() {
const pageContext = usePageContext()
const { Page: NestedView } = pageContext.nested[0]
// ...
}
The onBeforeRender() hooks of all .page.js matching the same URL are called in parallel.
The parent onBeforeRender() hooks are cached if the URL segment didn't change for the parent .page.js.
This feature would be great to use in my current project. Currently, using the solution given here. Thank you!
@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.
+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!
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.
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!
(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 ;)
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 😇
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.
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.
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.
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.
Sound like a good idea to have this DX. Please support if possible. Thanks!
Closing in favor of improved docs https://vike.dev/Layout#nested-layouts and upcoming uproved DX https://github.com/vikejs/vike/issues/1459 (including deep integration with data fetching tools).