Wrapping NuxtLayout with App component in Nuxtv3
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?
or
2 Replies
Hi @Olamide. 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:
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:
----------------------<@957789387213656114> Kapa.ai is still learning and improving, please let me know how I did by reacting below.