Notification component created even when toast is not triggered, causing z-index issues

[pazfelipe]

Environment

• Operating System: Darwin
• Node Version: v22.3.0
• Nuxt Version: 3.13.1
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, modules, plugins, runtimeConfig, i18n
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected]
• Build Modules: -

Version

v2.18.4

Reproduction

https://stackblitz.com/edit/nuxt-ui-jfdc58?file=app.vue,app.config.ts

Description

Description

The Nuxt UI notification component is currently being created and added to the DOM even when no toast has been triggered. This behavior leads to unintended consequences due to the component's z-index:

The notification component occupies part of the screen unnecessarily.
It overlaps other elements on the page due to its z-index, potentially disrupting the user interface.

Expected Behavior

The notification component should only be created and added to the DOM when a toast is actually triggered.

Current Behavior

The notification component is always present in the DOM, regardless of whether a toast has been triggered or not.

Steps to Reproduce

• Implement the Nuxt UI notification component in a project.
• Inspect the DOM without triggering any toasts.
• Observe that the notification component is present and has a z-index applied.

Additional Context

This issue affects the usability and performance of applications using the Nuxt UI notification component. Resolving it would improve both the user experience and the overall efficiency of the component.

Possible Solution

Consider implementing a conditional rendering approach where the notification component is only added to the DOM when it's actually needed (i.e., when a toast is triggered).

Additional context

No response

Logs

No response

[duncandejong]

i confirm this. It is blocking the ui.

this helped me, setting the pointer events of the notifications wrapper to none:
notifications: {
wrapper: 'fixed flex flex-col justify-end z-[55] pointer-events-none',
position: 'bottom-0 end-0',
width: 'w-full sm:w-96',
container: 'px-4 sm:px-6 py-6 space-y-3 overflow-y-auto',
},