Layout With Nested Page Panel on the Right
Hi everyone! I’m building an app in Nuxt 3 with a layout like this (see image attached).
Sometimes (based on the route), I want to show a nested page panel on the right of the main page, without replacing it.
Use case:
* There's a persistent layout with:
* Left-side Sidebar
* Top page (Nested layout)
* Header
* Toolbar (Tabs for nested pages)
* Page view
* Optional side panel (Nested page)
* A side panel for details
Think:
Is this possible without repeating the nested layout for each page (which will cause issues on animations etc)?
I guess the following issues potentially could solve this:
https://github.com/nuxt/nuxt/issues/23929
https://github.com/nuxt/nuxt/issues/24541
See the Nuxt UI Pro Dashboard template (inbox page) for reference on basic idea - but my usecase requires a selected message as a nested route and that the "inbox" page has multiple nested routes
https://dashboard-template.nuxt.dev/inbox
2 Replies
Hi @hanniz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the available knowledge sources, Nuxt 3 supports nested layouts and pages using its file-based routing system, which allows you to compose complex UIs with persistent sidebars, headers, and nested content. However, the specific use case of having a persistent main layout (with sidebar, header, toolbar, etc.) and conditionally rendering a nested "side panel" (such as a detail view) alongside the main page—without duplicating layout code or breaking transitions—is not directly addressed in the documentation or examples.
What is possible with Nuxt 3:
- Nested Routes: You can structure your
You can achieve persistent layouts and nested content with Nuxt 3's layouts and nested routes, but rendering a persistent main view with an optional, route-driven side panel (without duplicating layout code) is not natively supported as of the current documentation. You may need to use workarounds, such as rendering the panel as a component within the main page and controlling its visibility via route params or state, until Nuxt adds more advanced nested routing features. For more on nested routes and layouts, see the official docs: Docs: Nested Routes, Docs: Named Layout. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
pages/ directory to create nested routes. For example, a parent page can include a <NuxtPage /> to render child routes, which is the standard way to achieve nested views in Nuxt 3. This is commonly used for layouts like [Sidebar] [Main Content], where the sidebar is persistent and the main content changes based on the route. You can also use the pageKey prop or definePageMeta({ key }) to control transitions for nested pages Docs: Nested Routes.
- Layout Composition: You can create layouts (e.g., default.vue, dashboard.vue) and assign them to pages using definePageMeta({ layout: 'dashboard' }). Layouts can include persistent UI elements like sidebars and headers Docs: Named Layout.
- Conditional Panels: For your use case, you could create a parent page (e.g., pages/dashboard.vue) that includes the sidebar, header, and toolbar, and then use nested routes for the main content and the optional side panel. For example:
In dashboard.vue, you could render both the main content and the panel using two <NuxtPage /> components, but Nuxt's routing system only renders one child route at a time by default. There is no built-in way (as of the knowledge sources) to render two sibling nested routes simultaneously (e.g., [Main Content] [Side Panel]) without custom logic.
- Workarounds: Some users implement this by using a combination of query parameters or state to conditionally render the side panel as a component within the main page, rather than as a separate route. Alternatively, you could use a modal or drawer component for the detail view, but this does not provide a separate URL for the panel.
Limitations:
- The knowledge sources do not describe a built-in Nuxt 3 feature that allows rendering two sibling nested routes (main content and side panel) at the same time, each with their own route and transitions, without duplicating layout code.
- The GitHub issues you referenced (https://github.com/nuxt/nuxt/issues/23929 and https://github.com/nuxt/nuxt/issues/24541) suggest that this is a known limitation and an area of active discussion in the Nuxt community.
Summary:You can achieve persistent layouts and nested content with Nuxt 3's layouts and nested routes, but rendering a persistent main view with an optional, route-driven side panel (without duplicating layout code) is not natively supported as of the current documentation. You may need to use workarounds, such as rendering the panel as a component within the main page and controlling its visibility via route params or state, until Nuxt adds more advanced nested routing features. For more on nested routes and layouts, see the official docs: Docs: Nested Routes, Docs: Named Layout. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@260392984132976650> Kapa.ai is still learning and improving, please let me know how I did by reacting below.