From 3168936376a0f1bf4945fcb429d45181cad9c2a8 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 1 Jun 2022 07:36:32 +0100
Subject: [PATCH] Fixed #2602 - Add Nuxt3 support for components using teleport

---
 rollup.config.js                              |  1 +
 src/components/autocomplete/AutoComplete.vue  | 16 +++-----
 src/components/calendar/Calendar.vue          | 18 ++++----
 .../cascadeselect/CascadeSelect.vue           | 16 +++-----
 src/components/colorpicker/ColorPicker.vue    | 18 ++++----
 src/components/confirmpopup/ConfirmPopup.vue  |  8 ++--
 src/components/contextmenu/ContextMenu.vue    |  8 ++--
 src/components/datatable/ColumnFilter.vue     |  8 ++--
 src/components/dialog/Dialog.vue              | 14 +++----
 src/components/dropdown/Dropdown.vue          | 16 +++-----
 src/components/galleria/Galleria.vue          |  8 ++--
 src/components/image/Image.vue                |  8 +++-
 src/components/menu/Menu.vue                  |  8 ++--
 src/components/multiselect/MultiSelect.vue    | 16 +++-----
 src/components/overlaypanel/OverlayPanel.vue  |  8 +++-
 src/components/password/Password.vue          | 16 +++-----
 src/components/portal/Portal.vue              | 41 +++++++++++++++++++
 src/components/portal/package.json            |  8 ++++
 src/components/sidebar/Sidebar.vue            |  8 +++-
 src/components/tieredmenu/TieredMenu.vue      |  8 ++--
 src/components/toast/Toast.vue                |  8 ++--
 src/components/treeselect/TreeSelect.vue      | 16 +++-----
 src/components/utils/DomHandler.js            |  4 ++
 src/components/utils/Utils.d.ts               |  1 +
 vue.config.js                                 |  1 +
 25 files changed, 166 insertions(+), 116 deletions(-)
 create mode 100644 src/components/portal/Portal.vue
 create mode 100644 src/components/portal/package.json

diff --git a/rollup.config.js b/rollup.config.js
index 37b7e4ec1..11e325c34 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -14,6 +14,7 @@ let coreDependencies = {
     'primevue/api': 'primevue.api',
     'primevue/config': 'primevue.config',
     'primevue/ripple': 'primevue.ripple',
+    'primevue/portal': 'primevue.portal',
     'primevue/tooltip': 'primevue.tooltip',
     'primevue/virtualscroller': 'primevue.virtualscroller',
     'primevue/confirmationeventbus': 'primevue.confirmationeventbus',
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 8b14976cb..d8a2c6201 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -16,7 +16,7 @@
         </ul>
         <i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i>
         <Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
-        <Teleport :to="appendTarget" :disabled="appendDisabled">
+        <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
@@ -47,7 +47,7 @@
                     <slot name="footer" :value="modelValue" :suggestions="suggestions"></slot>
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </span>
 </template>
 
@@ -57,6 +57,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'AutoComplete',
@@ -208,7 +209,7 @@ export default {
         },
         alignOverlay() {
             let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
-            if (this.appendDisabled) {
+            if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, target);
             }
             else {
@@ -613,19 +614,14 @@ export default {
         listId() {
             return UniqueComponentId() + '_list';
         },
-        appendDisabled() {
-            return this.appendTo === 'self';
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
-        },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
         }
     },
     components: {
         'Button': Button,
-        'VirtualScroller': VirtualScroller
+        'VirtualScroller': VirtualScroller,
+        'Portal': Portal
     },
     directives: {
         'ripple': Ripple
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index da7037aea..22c78045e 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -3,7 +3,7 @@
         <input :ref="inputRef" v-if="!inline" type="text" :class="['p-inputtext p-component', inputClass]" :style="inputStyle" @input="onInput" v-bind="$attrs"
             @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" inputmode="none">
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
-        <Teleport :to="appendTarget" :disabled="appendDisabled">
+        <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter($event)" @after-enter="onOverlayEnterComplete" @after-leave="onOverlayAfterLeave" @leave="onOverlayLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" @click="onOverlayClick" @mouseup="onOverlayMouseUp">
                     <template v-if="!timeOnly">
@@ -137,7 +137,7 @@
                     <slot name="footer"></slot>
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </span>
 </template>
 
@@ -146,6 +146,7 @@ import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils,UniqueComponentId}
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Calendar',
@@ -793,7 +794,7 @@ export default {
                 this.enableModality();
             }
             else if (this.overlay) {
-                if (this.appendDisabled) {
+                if (this.appendTo === 'self' || this.inline) {
                     DomHandler.relativePosition(this.overlay, this.$el);
                 }
                 else {
@@ -1706,7 +1707,7 @@ export default {
             }
 
             date = this.daylightSavingAdjust(new Date(year, month - 1, day));
-            
+
             if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
                 throw "Invalid date"; // E.g. 31/02/00
             }
@@ -2494,12 +2495,6 @@ export default {
         monthNames() {
             return this.$primevue.config.locale.monthNames;
         },
-        appendDisabled() {
-            return this.appendTo === 'self' || this.inline;
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
-        },
         attributeSelector() {
             return UniqueComponentId();
         },
@@ -2508,7 +2503,8 @@ export default {
         }
     },
     components: {
-        'CalendarButton': Button
+        'CalendarButton': Button,
+        'Portal': Portal
     },
     directives: {
         'ripple': Ripple
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 5e4e32cd3..44f385c1d 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -14,7 +14,7 @@
                 <span :class="dropdownIconClass"></span>
             </slot>
         </div>
-        <Teleport :to="appendTarget" :disabled="appendDisabled">
+        <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <div class="p-cascadeselect-items-wrapper">
@@ -25,7 +25,7 @@
                     </div>
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </div>
 </template>
 
@@ -33,6 +33,7 @@
 import {ConnectedOverlayScrollHandler,ObjectUtils,DomHandler,ZIndexUtils} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import CascadeSelectSub from './CascadeSelectSub.vue';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'CascadeSelect',
@@ -199,7 +200,7 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            if (this.appendDisabled) {
+            if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$el);
             }
             else {
@@ -323,18 +324,13 @@ export default {
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
         },
-        appendDisabled() {
-            return this.appendTo === 'self';
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
-        },
         dropdownIconClass() {
             return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
         }
     },
     components: {
-        'CascadeSelectSub': CascadeSelectSub
+        'CascadeSelectSub': CascadeSelectSub,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 9f0cea5df..30fd47dff 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/src/components/colorpicker/ColorPicker.vue
@@ -2,7 +2,7 @@
     <div ref="container" :class="containerClass">
         <input ref="input" type="text" :class="inputClass" readonly="readonly" :tabindex="tabindex" :disabled="disabled"
             @click="onInputClick" @keydown="onInputKeydown" v-if="!inline" :aria-labelledby="ariaLabelledBy"/>
-        <Teleport :to="appendTarget" :disabled="appendDisabled">
+        <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="pickerRef" :class="pickerClass" v-if="inline ? true : overlayVisible" @click="onOverlayClick">
                     <div class="p-colorpicker-content">
@@ -19,13 +19,14 @@
                     </div>
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </div>
 </template>
 
 <script>
 import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'ColorPicker',
@@ -356,7 +357,7 @@ export default {
             if (this.autoZIndex) {
                 ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             }
-            
+
             this.$emit('show');
         },
         onOverlayLeave() {
@@ -372,7 +373,7 @@ export default {
             }
         },
         alignOverlay() {
-            if (this.appendDisabled)
+            if (this.appendTo === 'self')
                 DomHandler.relativePosition(this.picker, this.$refs.input);
             else
                 DomHandler.absolutePosition(this.picker, this.$refs.input);
@@ -580,13 +581,10 @@ export default {
                 'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
-        },
-        appendDisabled() {
-            return this.appendTo === 'self' || this.inline;
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
         }
+    },
+    components: {
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/confirmpopup/ConfirmPopup.vue b/src/components/confirmpopup/ConfirmPopup.vue
index 18f872690..8cd4feb5d 100644
--- a/src/components/confirmpopup/ConfirmPopup.vue
+++ b/src/components/confirmpopup/ConfirmPopup.vue
@@ -1,5 +1,5 @@
 <template>
-    <Teleport to="body">
+    <Portal>
         <transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
                 <template v-if="!$slots.message">
@@ -15,7 +15,7 @@
                 </div>
             </div>
         </transition>
-    </Teleport>
+    </Portal>
 </template>
 
 <script>
@@ -23,6 +23,7 @@ import ConfirmationEventBus from 'primevue/confirmationeventbus';
 import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Button from 'primevue/button';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'ConfirmPopup',
@@ -223,7 +224,8 @@ export default {
         }
     },
     components: {
-        'CPButton': Button
+        'CPButton': Button,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue
index 26da5f3a8..acd1f118e 100755
--- a/src/components/contextmenu/ContextMenu.vue
+++ b/src/components/contextmenu/ContextMenu.vue
@@ -1,16 +1,17 @@
 <template>
-    <Teleport :to="appendTo">
+    <Portal :appendTo="appendTo">
         <transition name="p-contextmenu" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div :ref="containerRef" :class="containerClass" v-if="visible" v-bind="$attrs">
                 <ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
             </div>
         </transition>
-    </Teleport>
+    </Portal>
 </template>
 
 <script>
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
 import ContextMenuSub from './ContextMenuSub.vue';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'ContextMenu',
@@ -209,7 +210,8 @@ export default {
         }
     },
     components: {
-        'ContextMenuSub': ContextMenuSub
+        'ContextMenuSub': ContextMenuSub,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index 6312f6dcb..59003cf36 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -7,7 +7,7 @@
             :class="{'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter()}"
             @click="toggleMenu()" @keydown="onToggleButtonKeyDown($event)"><span class="pi pi-filter-icon pi-filter"></span></button>
         <button v-if="showClearButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
-        <Teleport to="body">
+        <Portal>
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" @mousedown="onContentMouseDown">
                     <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
@@ -49,7 +49,7 @@
                     <component :is="filterFooterTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </div>
 </template>
 
@@ -59,6 +59,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import {FilterOperator} from 'primevue/api';
 import Dropdown from 'primevue/dropdown';
 import Button from 'primevue/button';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'ColumnFilter',
@@ -514,7 +515,8 @@ export default {
     },
     components: {
         'CFDropdown': Dropdown,
-        'CFButton': Button
+        'CFButton': Button,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index e0503179e..2d1f6c885 100755
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -1,5 +1,5 @@
 <template>
-    <Teleport :to="appendTarget" :disabled="appendDisabled">
+    <Portal :appendTo="appendTo">
         <div :ref="maskRef" :class="maskClass" v-if="containerVisible" @click="onMaskClick">
             <transition name="p-dialog" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
                 <div :ref="containerRef" :class="dialogClass" v-if="visible" v-bind="$attrs" role="dialog" :aria-labelledby="ariaLabelledById" :aria-modal="modal">
@@ -25,12 +25,13 @@
                 </div>
             </transition>
         </div>
-    </Teleport>
+    </Portal>
 </template>
 
 <script>
 import {UniqueComponentId,DomHandler,ZIndexUtils} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Dialog',
@@ -405,16 +406,13 @@ export default {
         },
         contentStyleClass() {
             return ['p-dialog-content', this.contentClass];
-        },
-        appendDisabled() {
-            return this.appendTo === 'self';
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
         }
     },
     directives: {
         'ripple': Ripple
+    },
+    components: {
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 14dce166e..d6fe0d4e3 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -15,7 +15,7 @@
                 <span :class="dropdownIconClass"></span>
             </slot>
         </div>
-        <Teleport :to="appendTarget" :disabled="appendDisabled">
+        <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
@@ -62,7 +62,7 @@
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </div>
 </template>
 
@@ -72,6 +72,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Dropdown',
@@ -471,7 +472,7 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            if (this.appendDisabled) {
+            if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$el);
             }
             else {
@@ -720,15 +721,9 @@ export default {
         emptyMessageText() {
             return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
         },
-        appendDisabled() {
-            return this.appendTo === 'self';
-        },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
         },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
-        },
         dropdownIconClass() {
             return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
         }
@@ -737,7 +732,8 @@ export default {
         'ripple': Ripple
     },
     components: {
-        'VirtualScroller': VirtualScroller
+        'VirtualScroller': VirtualScroller,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index 7774b00b7..cf320b8be 100755
--- a/src/components/galleria/Galleria.vue
+++ b/src/components/galleria/Galleria.vue
@@ -1,17 +1,18 @@
 <template>
-    <Teleport to="body" v-if="fullScreen">
+    <Portal v-if="fullScreen">
         <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
                 <GalleriaContent :ref="containerRef" v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
             </transition>
         </div>
-    </Teleport>
+    </Portal>
     <GalleriaContent v-else v-bind="$props" :templates="$slots" @activeitem-change="onActiveItemChange" />
 </template>
 
 <script>
 import GalleriaContent from './GalleriaContent.vue';
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Galleria',
@@ -172,7 +173,8 @@ export default {
         }
     },
     components: {
-        'GalleriaContent': GalleriaContent
+        'GalleriaContent': GalleriaContent,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/image/Image.vue b/src/components/image/Image.vue
index 8aee56b0f..53f97ecb3 100644
--- a/src/components/image/Image.vue
+++ b/src/components/image/Image.vue
@@ -6,7 +6,7 @@
                 <i class="p-image-preview-icon pi pi-eye"></i>
             </slot>
         </div>
-        <Teleport to="body">
+        <Portal>
             <div :ref="maskRef" :class="maskClass" v-if="maskVisible" @click="onMaskClick">
                 <div class="p-image-toolbar">
                     <button class="p-image-action p-link" @click="rotateRight" type="button">
@@ -31,12 +31,13 @@
                     </div>
                 </transition>
             </div>
-        </Teleport>
+        </Portal>
     </span>
 </template>
 
 <script>
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Image',
@@ -143,6 +144,9 @@ export default {
         zoomDisabled() {
             return this.scale <= 0.5 || this.scale >= 1.5;
         }
+    },
+    components: {
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 26431fb8c..59a5e70d3 100755
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-    <Teleport :to="appendTo" :disabled="!popup">
+    <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div :ref="containerRef" :class="containerClass" v-if="popup ? overlayVisible : true" v-bind="$attrs" @click="onOverlayClick">
                 <ul class="p-menu-list p-reset" role="menu">
@@ -19,13 +19,14 @@
                 </ul>
             </div>
         </transition>
-    </Teleport>
+    </Portal>
 </template>
 
 <script>
 import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Menuitem from './Menuitem.vue';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Menu',
@@ -220,7 +221,8 @@ export default {
         }
     },
     components: {
-        'Menuitem': Menuitem
+        'Menuitem': Menuitem,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index d08929cb6..a44dee862 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -27,7 +27,7 @@
                 <span :class="dropdownIconClass"></span>
             </slot>
         </div>
-        <Teleport :to="appendTarget" :disabled="appendDisabled">
+        <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
@@ -99,7 +99,7 @@
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </div>
 </template>
 
@@ -109,6 +109,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import {FilterService} from 'primevue/api';
 import Ripple from 'primevue/ripple';
 import VirtualScroller from 'primevue/virtualscroller';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'MultiSelect',
@@ -451,7 +452,7 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            if (this.appendDisabled) {
+            if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$el);
             }
             else {
@@ -722,12 +723,6 @@ export default {
         emptyMessageText() {
             return this.emptyMessage || this.$primevue.config.locale.emptyMessage;
         },
-        appendDisabled() {
-            return this.appendTo === 'self';
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
-        },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
         },
@@ -742,7 +737,8 @@ export default {
         'ripple': Ripple
     },
     components: {
-        'VirtualScroller': VirtualScroller
+        'VirtualScroller': VirtualScroller,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index f84899501..459c1ed08 100755
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -1,5 +1,5 @@
 <template>
-    <Teleport :to="appendTo">
+    <Portal :appendTo="appendTo">
         <transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
                 <div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick">
@@ -10,13 +10,14 @@
                 </button>
             </div>
         </transition>
-    </Teleport>
+    </Portal>
 </template>
 
 <script>
 import {UniqueComponentId,DomHandler,ConnectedOverlayScrollHandler,ZIndexUtils} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'OverlayPanel',
@@ -267,6 +268,9 @@ export default {
     },
     directives: {
         'ripple': Ripple
+    },
+    components: {
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/password/Password.vue b/src/components/password/Password.vue
index e146a7d71..4b309c035 100755
--- a/src/components/password/Password.vue
+++ b/src/components/password/Password.vue
@@ -2,7 +2,7 @@
     <div :class="containerClass" :style="style">
         <PInputText ref="input" :class="inputFieldClass" :style="inputStyle" :type="inputType" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="$attrs" />
         <i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
-        <Teleport :to="appendTarget" :disabled="appendDisabled">
+        <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" :class="panelStyleClass" v-if="overlayVisible" @click="onOverlayClick">
                     <slot name="header"></slot>
@@ -15,7 +15,7 @@
                     <slot name="footer"></slot>
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </div>
 </template>
 
@@ -23,6 +23,7 @@
 import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import InputText from 'primevue/inputtext';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Password',
@@ -127,7 +128,7 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            if (this.appendDisabled) {
+            if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$refs.input.$el);
             }
             else {
@@ -294,16 +295,11 @@ export default {
         },
         promptText() {
             return this.promptLabel || this.$primevue.config.locale.passwordPrompt;
-        },
-        appendDisabled() {
-            return this.appendTo === 'self';
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
         }
     },
     components: {
-        'PInputText': InputText
+        'PInputText': InputText,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/portal/Portal.vue b/src/components/portal/Portal.vue
new file mode 100644
index 000000000..395bbd571
--- /dev/null
+++ b/src/components/portal/Portal.vue
@@ -0,0 +1,41 @@
+<template>
+    <template v-if="inline">
+        <slot></slot>
+    </template>
+    <template v-else-if="mounted">
+        <Teleport :to="appendTo">
+            <slot></slot>
+        </Teleport>
+    </template>
+</template>
+
+<script>
+import { DomHandler } from 'primevue/utils';
+
+export default {
+    name: 'Portal',
+    props: {
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            mounted: false
+        }
+    },
+    mounted() {
+        this.mounted = DomHandler.isClient();
+    },
+    computed: {
+        inline() {
+            return this.disabled || this.appendTo === 'self';
+        }
+    }
+}
+</script>
diff --git a/src/components/portal/package.json b/src/components/portal/package.json
new file mode 100644
index 000000000..cccf68768
--- /dev/null
+++ b/src/components/portal/package.json
@@ -0,0 +1,8 @@
+{
+  "main": "./portal.cjs.js",
+  "module": "./portal.esm.js",
+  "unpkg": "./portal.min.js",
+  "browser": {
+    "./sfc": "./Portal.vue"
+  }
+}
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 59cb2f692..3412e489f 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-    <Teleport to="body">
+    <Portal>
         <transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
             <div :class="containerClass" v-if="visible" :ref="containerRef" role="complementary" :aria-modal="modal" v-bind="$attrs">
                 <div class="p-sidebar-header">
@@ -15,12 +15,13 @@
                 </div>
             </div>
         </transition>
-    </Teleport>
+    </Portal>
 </template>
 
 <script>
 import {DomHandler,ZIndexUtils} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'Sidebar',
@@ -164,6 +165,9 @@ export default {
     },
     directives: {
         'ripple': Ripple
+    },
+    components: {
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index 73d25b606..ffe9957af 100755
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -1,16 +1,17 @@
 <template>
-    <Teleport :to="appendTo" :disabled="!popup">
+    <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
             <div :ref="containerRef" :class="containerClass" v-if="popup ? visible : true" v-bind="$attrs" @click="onOverlayClick">
                 <TieredMenuSub :model="model" :root="true" :popup="popup" @leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
             </div>
         </transition>
-    </Teleport>
+    </Portal>
 </template>
 
 <script>
 import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
+import Portal from 'primevue/portal';
 import TieredMenuSub from './TieredMenuSub.vue';
 
 export default {
@@ -188,7 +189,8 @@ export default {
         }
     },
     components: {
-        'TieredMenuSub': TieredMenuSub
+        'TieredMenuSub': TieredMenuSub,
+        'Portal': Portal
     }
 }
 </script>
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 6452591b1..dd4ae63eb 100755
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -1,17 +1,18 @@
 <template>
-    <Teleport to="body">
+    <Portal>
         <div ref="container" :class="containerClass" v-bind="$attrs">
             <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave">
                 <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)" :template="$slots.message"/>
             </transition-group>
         </div>
-    </Teleport>
+    </Portal>
 </template>
 
 <script>
 import ToastEventBus from 'primevue/toasteventbus';
 import ToastMessage from './ToastMessage.vue';
 import {ZIndexUtils,UniqueComponentId,ObjectUtils} from 'primevue/utils';
+import Portal from 'primevue/portal';
 
 var messageIdx = 0;
 
@@ -142,7 +143,8 @@ export default {
         }
     },
     components: {
-        'ToastMessage': ToastMessage
+        'ToastMessage': ToastMessage,
+        'Portal': Portal
     },
     computed: {
         containerClass() {
diff --git a/src/components/treeselect/TreeSelect.vue b/src/components/treeselect/TreeSelect.vue
index 5b94a31a7..7eed365d5 100644
--- a/src/components/treeselect/TreeSelect.vue
+++ b/src/components/treeselect/TreeSelect.vue
@@ -24,7 +24,7 @@
                 <span class="p-treeselect-trigger-icon pi pi-chevron-down"></span>
             </slot>
         </div>
-        <Teleport :to="appendTarget" :disabled="appendDisabled">
+        <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
                 <div :ref="overlayRef" v-if="overlayVisible" @click="onOverlayClick" :class="panelStyleClass">
                     <slot name="header" :value="modelValue" :options="options"></slot>
@@ -40,7 +40,7 @@
                     <slot name="footer" :value="modelValue" :options="options"></slot>
                 </div>
             </transition>
-        </Teleport>
+        </Portal>
     </div>
 </template>
 
@@ -49,6 +49,7 @@ import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/uti
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Tree from 'primevue/tree';
 import Ripple from 'primevue/ripple';
+import Portal from 'primevue/portal';
 
 export default {
     name: 'TreeSelect',
@@ -232,7 +233,7 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            if (this.appendDisabled) {
+            if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, this.$el);
             }
             else {
@@ -414,16 +415,11 @@ export default {
         },
         emptyOptions() {
             return !this.options || this.options.length === 0;
-        },
-        appendDisabled() {
-            return this.appendTo === 'self';
-        },
-        appendTarget() {
-            return this.appendDisabled ? null : this.appendTo;
         }
     },
     components: {
-        'TSTree': Tree
+        'TSTree': Tree,
+        'Portal': Portal
     },
     directives: {
         'ripple': Ripple
diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
index f8621ca98..46ab5494f 100755
--- a/src/components/utils/DomHandler.js
+++ b/src/components/utils/DomHandler.js
@@ -453,6 +453,10 @@ export default  {
         (element)[methodName].apply(element, args);
     },
 
+    isClient() {
+        return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+    },
+
     getFocusableElements(element) {
         let focusableElements = this.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
                 [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
diff --git a/src/components/utils/Utils.d.ts b/src/components/utils/Utils.d.ts
index b9daf9ed5..8937cfc8e 100644
--- a/src/components/utils/Utils.d.ts
+++ b/src/components/utils/Utils.d.ts
@@ -42,6 +42,7 @@ export declare class DomHandler {
     static resolveUserAgent(): { browser: string; version: string; };
     static isVisible(el: HTMLElement): boolean;
     static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
+    static isClient(): boolean;
     static getFocusableElements(el: HTMLElement): any[];
     static getFirstFocusableElement(el: HTMLElement): any;
     static isClickable(el: HTMLElement): boolean;
diff --git a/vue.config.js b/vue.config.js
index 586f6f46c..a7e8189d3 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -12,6 +12,7 @@ module.exports = {
                 'primevue/usetoast': path.resolve(__dirname, 'src/components/usetoast/UseToast.js'),
                 'primevue/utils': path.resolve(__dirname, 'src/components/utils/Utils.js'),
                 'primevue/api': path.resolve(__dirname, 'src/components/api/Api.js'),
+                'primevue/portal': path.resolve(__dirname, 'src/components/portal/Portal.vue'),
                 'primevue/button': path.resolve(__dirname, 'src/components/button/Button.vue'),
                 'primevue/inputtext': path.resolve(__dirname, 'src/components/inputtext/InputText.vue'),
                 'primevue/dialog': path.resolve(__dirname, 'src/components/dialog/Dialog.vue'),