N
Nuxt•3mo ago
Red

NuxtPage seem to work when using shadcn sidebar

I'm new to vue in general and I was following the shadcn setup instructions for the sidebar. For some reason when I use <NuxtPage /> Nothing seems to render however it gets fixed when i use <slot/>. Is this expected or am i doing something wrong? 
<script setup lang="ts">
import AppSidebar from "@/components/AppSidebar.vue"
import {SidebarProvider, SidebarTrigger} from "@/components/ui/sidebar"
import {Toaster} from '@/components/ui/sonner'
import 'vue-sonner/style.css'

const defaultOpen = useCookie<boolean>("sidebar_state")
</script>

<template>
  <NuxtRouteAnnouncer/>
  <SidebarProvider :default-open="defaultOpen">
    <AppSidebar />
    <main>
      <SidebarTrigger />
      <slot/>
    </main>
  </SidebarProvider>
  <Toaster class="pointer-events-auto"/>
</template>
<script setup lang="ts">
import AppSidebar from "@/components/AppSidebar.vue"
import {SidebarProvider, SidebarTrigger} from "@/components/ui/sidebar"
import {Toaster} from '@/components/ui/sonner'
import 'vue-sonner/style.css'

const defaultOpen = useCookie<boolean>("sidebar_state")
</script>

<template>
  <NuxtRouteAnnouncer/>
  <SidebarProvider :default-open="defaultOpen">
    <AppSidebar />
    <main>
      <SidebarTrigger />
      <slot/>
    </main>
  </SidebarProvider>
  <Toaster class="pointer-events-auto"/>
</template>
5 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Red. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Short answer: use <slot /> inside layouts, and <NuxtPage /> only in app.vue (or a parent page), not inside a layout. - In Nuxt, layouts render their page content via a slot. If you place <NuxtPage /> inside a layout, it won’t render the current page because layouts aren’t responsible for routing—the page content is passed into the layout through <slot />. That’s why your layout works with <slot /> and appears empty with <NuxtPage />. [Layouts guide; Views intro] - The recommended structure is: - app.vue wraps pages with NuxtLayout and renders routes with NuxtPage: 
    <template>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </template>
    
    <template>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </template>
[app.vue guide] - Your layout renders the passed-in page content with <slot />: 
    <template>
      <SidebarProvider :default-open="defaultOpen">
        <AppSidebar />
        <main>
          <SidebarTrigger />
          <slot />
        </main>
      </SidebarProvider>
    </template>
    
    <template>
      <SidebarProvider :default-open="defaultOpen">
        <AppSidebar />
        <main>
          <SidebarTrigger />
          <slot />
        </main>
      </SidebarProvider>
    </template>
[Layouts guide] - Use <NuxtPage /> for routing outlets (typically in app.vue, or in a parent page for nested routes). It wraps RouterView and manages transitions/keep-alive correctly; ensure a single root element when transitions are enabled. [NuxtPage API] If you intended to compose multiple “layouts,” consider using nested routes: a parent page containing sidebar and a child <NuxtPage /> for its sub-pages. [Pages and layouts migration; SO nested routes tip] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@1070955241555628073> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Red
RedOP•3mo ago
@kapa.ai Since i only have a single layout isn't it recommended that I should not use the layouts file. Therfore should i leave the slot component in?
kapa.ai
kapa.ai•3mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes. If you only have a single layout, Nuxt recommends using app.vue with <NuxtPage /> and not creating a layouts directory. In that case, keep your sidebar structure directly in app.vue, and use <NuxtPage /> there (your “layout” content is just app.vue). [Views; app.vue] If you do use a layout file, then inside the layout you should render page content with <slot />, not <NuxtPage />. [Layouts; NuxtLayout API] So: - Single layout: put your sidebar in app.vue and use <NuxtPage /> there. - Multiple layouts: keep them in app/layouts and use <slot /> inside each layout. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@1070955241555628073> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?