N
Nuxt•2mo ago
Uchuu

Why is nothing showing in my dashboard panel?

Code incoming
4 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Uchuu. 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 knowledge sources, a common reason for nothing showing in your dashboard panel when using the Nuxt UI Pro components is that the UDashboardPanel component requires content to be provided via its slots. If you do not provide any content in the header, body, footer, or default slot, the panel will render but appear empty. For example, this will show an empty panel: 
<template>
  <UDashboardPanel resizable />
</template>
<template>
  <UDashboardPanel resizable />
</template>
To display content, you should use one of the available slots, such as body: 
<template>
  <UDashboardPanel resizable>
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </UDashboardPanel>
</template>
<template>
  <UDashboardPanel resizable>
    <template #body>
      <Placeholder class="h-96" />
    </template>
  </UDashboardPanel>
</template>
Or use the default slot if you want to bypass the scrollable body with padding: 
<template>
  <UDashboardPanel resizable>
    <div>Your content here</div>
  </UDashboardPanel>
</template>
<template>
  <UDashboardPanel resizable>
    <div>Your content here</div>
  </UDashboardPanel>
</template>
If you are using the header slot (commonly with UDashboardNavbar), make sure you also provide content for the body or default slot, or else the panel will still appear empty except for the header area DashboardPanel Usage. If you continue to see nothing, double-check that your panel is not hidden by a class (e.g., class="hidden") and that it is placed inside a UDashboardGroup as recommended for layout context DashboardGroup Usage. If you provide your code, I can help you identify the specific issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1035470271441805353> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Uchuu
UchuuOP•2mo ago
layouts/dashboard.vue 
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const open = ref(false)

const links = [[{
    label: 'Home',
    icon: 'i-lucide-house',
    to: '/',
    onSelect: () => {
        open.value = false
    }
}, {
    label: 'Inbox',
    icon: 'i-lucide-inbox',
    to: '/inbox',
    badge: '4',
    onSelect: () => {
        open.value = false
    }
}, {
    label: 'Customers',
    icon: 'i-lucide-users',
    to: '/customers',
    onSelect: () => {
        open.value = false
    }
}
] satisfies NavigationMenuItem[][]
</script>

<template>
    <UDashboardGroup>
        <UDashboardSidebar id="default" v-model:open="open" collapsible resizable class="bg-elevated/40"
            :ui="{ footer: 'lg:border-t lg:border-default' }">
            <!-- <template #header="{ collapsed }">
                <UButton :avatar="{
                    src: 'https://github.com/nuxt.png'
                }" size="xl" variant="subtle" block>
                    W8R ∙ Modern Waitlists
                </UButton>
            </template> -->

            <template #default="{ collapsed }">
                <UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-default" />

                <UNavigationMenu :collapsed="collapsed" :items="links[0]" orientation="vertical" tooltip popover />

                <UNavigationMenu :collapsed="collapsed" :items="links[1]" orientation="vertical" tooltip
                    class="mt-auto" />
            </template>

            
        </UDashboardSidebar>
        <slot />
    </UDashboardGroup>
</template>

<style scoped>
h1 {
    font-family: "Noto Serif";
}
</style>
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const open = ref(false)

const links = [[{
    label: 'Home',
    icon: 'i-lucide-house',
    to: '/',
    onSelect: () => {
        open.value = false
    }
}, {
    label: 'Inbox',
    icon: 'i-lucide-inbox',
    to: '/inbox',
    badge: '4',
    onSelect: () => {
        open.value = false
    }
}, {
    label: 'Customers',
    icon: 'i-lucide-users',
    to: '/customers',
    onSelect: () => {
        open.value = false
    }
}
] satisfies NavigationMenuItem[][]
</script>

<template>
    <UDashboardGroup>
        <UDashboardSidebar id="default" v-model:open="open" collapsible resizable class="bg-elevated/40"
            :ui="{ footer: 'lg:border-t lg:border-default' }">
            <!-- <template #header="{ collapsed }">
                <UButton :avatar="{
                    src: 'https://github.com/nuxt.png'
                }" size="xl" variant="subtle" block>
                    W8R ∙ Modern Waitlists
                </UButton>
            </template> -->

            <template #default="{ collapsed }">
                <UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-default" />

                <UNavigationMenu :collapsed="collapsed" :items="links[0]" orientation="vertical" tooltip popover />

                <UNavigationMenu :collapsed="collapsed" :items="links[1]" orientation="vertical" tooltip
                    class="mt-auto" />
            </template>

            
        </UDashboardSidebar>
        <slot />
    </UDashboardGroup>
</template>

<style scoped>
h1 {
    font-family: "Noto Serif";
}
</style>
pages/dashboard/index.vue 
<template>
   This is the dashboard index
</template>
<template>
   This is the dashboard index
</template>
pages/dashboard.vue 
<script setup lang="ts">
definePageMeta({
    layout: "dashboard"
})

import type { NavigationMenuItem } from '@nuxt/ui'

const links = [[{
    label: 'General',
    icon: 'i-lucide-layout-dashboard',
    to: '/dashboard',
    exact: true
}, {
    label: 'Posts',
    icon: 'i-lucide-briefcase',
    to: '/dashboard/posts'
}, {
    label: 'Create',
    icon: 'i-lucide-user-round-plus',
    to: '/dashboard/create'
}]] satisfies NavigationMenuItem[][]
</script>

<template>
    <UDashboardPanel id="dashboard">
        <UDashboardNavbar title="Dashboard" :ui="{ right: 'gap-3' }">
            <template #leading>
                <UDashboardSidebarCollapse />
            </template>
        </UDashboardNavbar>
        <UDashboardToolbar>
            <!-- NOTE: The `-mx-1` class is used to align with the `DashboardSidebarCollapse` button here. -->
            <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
        </UDashboardToolbar>

        <template #body>
            <div class="">
                <NuxtPage />
            </div>
        </template>
    </UDashboardPanel>
</template>
<script setup lang="ts">
definePageMeta({
    layout: "dashboard"
})

import type { NavigationMenuItem } from '@nuxt/ui'

const links = [[{
    label: 'General',
    icon: 'i-lucide-layout-dashboard',
    to: '/dashboard',
    exact: true
}, {
    label: 'Posts',
    icon: 'i-lucide-briefcase',
    to: '/dashboard/posts'
}, {
    label: 'Create',
    icon: 'i-lucide-user-round-plus',
    to: '/dashboard/create'
}]] satisfies NavigationMenuItem[][]
</script>

<template>
    <UDashboardPanel id="dashboard">
        <UDashboardNavbar title="Dashboard" :ui="{ right: 'gap-3' }">
            <template #leading>
                <UDashboardSidebarCollapse />
            </template>
        </UDashboardNavbar>
        <UDashboardToolbar>
            <!-- NOTE: The `-mx-1` class is used to align with the `DashboardSidebarCollapse` button here. -->
            <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
        </UDashboardToolbar>

        <template #body>
            <div class="">
                <NuxtPage />
            </div>
        </template>
    </UDashboardPanel>
</template>
@kapa.ai
kapa.ai
kapa.ai•2mo ago
Let me check the knowledge base for you again. One moment! :books: Sorry @Uchuu, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Did you find this page helpful?