From 8451f4d9bbe51972688966f529cf0713060adb7a Mon Sep 17 00:00:00 2001
From: Arash <38922203+arashsheyda@users.noreply.github.com>
Date: Fri, 3 Nov 2023 08:08:52 -0600
Subject: [PATCH] fix(Notifications): teleport to `body` (#909)

---
 .../components/overlays/Notifications.vue     | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/runtime/components/overlays/Notifications.vue b/src/runtime/components/overlays/Notifications.vue
index d04da495..b887ad46 100644
--- a/src/runtime/components/overlays/Notifications.vue
+++ b/src/runtime/components/overlays/Notifications.vue
@@ -1,20 +1,22 @@
 <template>
-  <div :class="wrapperClass" role="region" v-bind="attrs">
-    <div v-if="notifications.length" :class="ui.container">
-      <div v-for="notification of notifications" :key="notification.id">
-        <UNotification
-          v-bind="notification"
-          :class="notification.click && 'cursor-pointer'"
-          @click="notification.click && notification.click(notification)"
-          @close="toast.remove(notification.id)"
-        >
-          <template v-for="(_, name) in $slots" #[name]="slotData">
-            <slot :name="name" v-bind="slotData" />
-          </template>
-        </UNotification>
+  <Teleport to="body">
+    <div :class="wrapperClass" role="region" v-bind="attrs">
+      <div v-if="notifications.length" :class="ui.container">
+        <div v-for="notification of notifications" :key="notification.id">
+          <UNotification
+            v-bind="notification"
+            :class="notification.click && 'cursor-pointer'"
+            @click="notification.click && notification.click(notification)"
+            @close="toast.remove(notification.id)"
+          >
+            <template v-for="(_, name) in $slots" #[name]="slotData">
+              <slot :name="name" v-bind="slotData" />
+            </template>
+          </UNotification>
+        </div>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script lang="ts">