Nuxt•3w ago

Unwanted UDashboardNav behavior in nuxt 3.17.7

I have an index.vue page with a UDashboardPanel but using the setBreadcrumbs from useDashboard() and then in the [id].vue page i use the UDashboardNavbar with UBreadcrumb. For More context, i'm not the regular dev on this part of the projet and i saw this in another page. The behavior expected is that on the id.page i should only see the custom Ubreadcrumb with the links but i see two breadcumbs, the original one from the index.vue and the custom one. We have the default layout with UDashboardGroup with a UDashboardSidebar and a slot. I tried to reproduce what worked one another page but maybe i'm missing something to add somewhere. I cannot ask the actual dev on this part since is on vacation and my investigation in the doc didn't helped that much. This may be something very obvious but i'm usually on the back part of the project 😅

2 Replies

kapa.ai•3w ago

Hi @Yamada. 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 information in the knowledge sources, here’s what can be inferred about your issue with duplicate breadcrumbs in your Nuxt 3.17.7 dashboard setup: Likely Cause The double breadcrumb display is likely due to both the index.vue and [id].vue pages rendering a breadcrumb component—one set globally (or in a parent/default slot) and another set specifically in your [id].vue page. In the Nuxt UI Pro dashboard pattern, it’s common to have a layout like this: - layouts/dashboard.vue with <UDashboardGroup>, <UDashboardSidebar>, and a <slot /> for page content. - pages/index.vue with a <UDashboardPanel> and possibly a default breadcrumb in the header. - pages/[id].vue with its own <UDashboardPanel> and a custom <UBreadcrumb> in the navbar/header. If the index.vue page (or the layout) includes a breadcrumb in a slot that is not properly overridden or removed in [id].vue, both will render when you navigate to a dynamic route. What to Check 1. Slot Usage:
Ensure that the slot where the breadcrumb is rendered in index.vue or the layout is not also being filled in [id].vue. If both pages fill the same slot (e.g., header), and the layout or parent page provides a default, you may see both. 2. Panel/Header Structure:
The UDashboardPanel component uses slots like header, body, and footer. If you want to override the header (and thus the breadcrumb) in [id].vue, you must provide your own header slot content, which will replace the default. Example from the docs:

   <UDashboardPanel>
     <template #header>
       <UDashboardNavbar>
         <UBreadcrumb :items="breadcrumb" />
       </UDashboardNavbar>
     </template>
     <!-- ... -->
   </UDashboardPanel>

   <UDashboardPanel>
     <template #header>
       <UDashboardNavbar>
         <UBreadcrumb :items="breadcrumb" />
       </UDashboardNavbar>
     </template>
     <!-- ... -->
   </UDashboardPanel>

This will override any default header content, including a default breadcrumb, for this panel only DashboardPanel Usage. 3. Breadcrumb Placement:
If the breadcrumb is rendered in a global layout (e.g., in layouts/dashboard.vue), and you want to show a custom one only on [id].vue, you need to ensure the global one is not rendered for that route. This may require conditional rendering based on the route. What to Do - Override the header slot in [id].vue to ensure only your custom breadcrumb is rendered. - Check for global or parent breadcrumb rendering in the layout or index.vue and conditionally hide it when on a dynamic route. - Avoid rendering breadcrumbs in both the parent and child at the same time unless you want both to appear. Example Fix In [id].vue:

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar>
        <UBreadcrumb :items="breadcrumb" />
      </UDashboardNavbar>
    </template>
    <!-- ... -->
  </UDashboardPanel>
</template>

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar>
        <UBreadcrumb :items="breadcrumb" />
      </UDashboardNavbar>
    </template>
    <!-- ... -->
  </UDashboardPanel>
</template>

This ensures only the custom breadcrumb appears in the header for this page. If the layout or index.vue is rendering a breadcrumb by default, you may need to add a check:

<UBreadcrumb v-if="!isDynamicPage" :items="defaultBreadcrumb" />

<UBreadcrumb v-if="!isDynamicPage" :items="defaultBreadcrumb" />

Where isDynamicPage is a computed property based on the route. --- If you need more specific help, please provide the relevant template code for your layout, index.vue, and [id].vue pages. The knowledge sources do not provide details about setBreadcrumbs from useDashboard(), so if this is a custom composable, check its implementation to ensure it doesn't cause duplicate rendering. Let me know if you need help with conditional rendering or slot overrides!
DashboardPanel Usage ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@351460208545103873> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Unwanted UDashboardNav behavior in nuxt 3.17.7

Did you find this page helpful?