Wrapping NuxtLayout with App component in Nuxtv3

[arctic sedge]

According to Nuxtv3 documentation, it is required to wrap my app with App component in order to use layered components like Toaster and Modal. This seems to be straightforward for apps without NuxtLayout but what is the right way to add App component for apps with NuxtLayout?

<App>
  <NuxtLayout>...</NuxtLayout>
</App>

or

<NuxtLayout>
  <App>...</App>
<NuxtLayout>

[sturdy hornet]

Hi @arctic sedge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The correct way to wrap your Nuxt 3 application with the UApp component when using layouts is to place the NuxtLayout component inside the UApp component, like this:

<template>
  <UApp>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </UApp>
</template>

According to the Nuxt UI documentation, the UApp component should be at the root of your application. It provides global configurations and is required for components like Toast and Tooltip to work properly, as well as programmatic overlays (modals and slideovers).

The UApp component implements Reka UI's ConfigProvider to provide global configuration to all components and uses ToastProvider and TooltipProvider to enable global toasts and tooltips functionality UI Components App.

This structure is also confirmed in the Nuxt UI installation guide, which recommends wrapping your app with the App component at the root level UI Installation for Nuxt.

In a typical Nuxt 3 application with layouts, your app.vue file should look like the example above, where:

1. UApp is the outermost component
2. NuxtLayout is inside it to handle your layouts
3. NuxtPage is inside the layout to render the current page

This structure ensures that all UI components like toasts and modals work correctly across your entire application, regardless of which layout or page is currently active.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: