Use vue-portal for VTeleport

nuxt.config.ts

@@ -187,6 +187,7 @@ const config: NuxtConfig = {
     '@pinia/nuxt',
   ],
   modules: [
+    'portal-vue/nuxt',
     '@nuxtjs/i18n',
     '@nuxtjs/redirect-module',
     '@nuxtjs/sentry',

package.json

@@ -89,6 +89,7 @@
     "node-html-parser": "^5.3.3",
     "nuxt": "^2.15.4",
     "pinia": "^2.0.16",
+    "portal-vue": "^2.1.7",
     "postcss-focus-visible": "^6.0.4",
     "prom-client": "^14.0.1",
     "rfdc": "^1.3.0",

src/components/VContentSwitcher/VSearchTypeButton.vue

@@ -13,8 +13,8 @@
   >
     <VIcon :icon-path="icon" />
     <span
-      class="md:block md:truncate md:text-left md:ms-2"
-      :class="isHeaderScrolled ? 'hidden' : 'block truncate text-left ms-2'"
+      class="md:block md:truncate md:ms-2 md:text-start"
+      :class="isHeaderScrolled ? 'hidden' : 'block truncate ms-2 text-start'"
       >{{ buttonLabel }}</span
     >
     <VIcon

src/components/VHeader/VHeaderFilter.vue

@@ -35,6 +35,7 @@ import {
   inject,
   Ref,
 } from '@nuxtjs/composition-api'
+import { Portal as VTeleport } from 'portal-vue'
 
 import { useBodyScrollLock } from '~/composables/use-body-scroll-lock'
 import { useI18n } from '~/composables/use-i18n'
@@ -44,7 +45,6 @@ import { useFocusFilters } from '~/composables/use-focus-filters'
 import { Focus } from '~/utils/focus-management'
 import { defineEvent } from '~/types/emits'
 
-import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VFilterButton from '~/components/VHeader/VFilterButton.vue'
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 

src/components/VHeader/VSidebarContent.vue

@@ -6,8 +6,8 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
+import { Portal as VTeleport } from 'portal-vue'
 
-import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VSearchGridFilter from '~/components/VFilters/VSearchGridFilter.vue'
 
 /**

src/components/VModal/VModalContent.vue

@@ -58,11 +58,11 @@
 <script>
 import { defineComponent, toRefs, ref, computed } from '@nuxtjs/composition-api'
 import { FocusTrap } from 'focus-trap-vue'
+import { Portal as VTeleport } from 'portal-vue'
 
 import { useDialogContent } from '~/composables/use-dialog-content'
 import { warn } from '~/utils/console'
 
-import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VButton from '~/components/VButton.vue'
 import VIcon from '~/components/VIcon/VIcon.vue'
 import VLogoButton from '~/components/VHeader/VLogoButton.vue'

src/components/VModal/VModalTarget.vue

@@ -1,14 +1,13 @@
 <template>
-  <VTeleportTarget name="modal" />
+  <PortalTarget name="modal" />
 </template>
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-
-import VTeleportTarget from '~/components/VTeleport/VTeleportTarget.vue'
+import { PortalTarget } from 'portal-vue'
 
 export default defineComponent({
   name: 'VModalTarget',
-  components: { VTeleportTarget },
+  components: { PortalTarget },
 })
 </script>

src/components/VModal/VSidebarTarget.vue

@@ -4,8 +4,7 @@
 
 <script>
 import { defineComponent } from '@nuxtjs/composition-api'
-
-import VTeleportTarget from '~/components/VTeleport/VTeleportTarget.vue'
+import { PortalTarget as VTeleportTarget } from 'portal-vue'
 
 export default defineComponent({
   name: 'VSidebarTarget',

src/components/VSkipToContentContainer.vue

@@ -14,10 +14,10 @@
 
 <script>
 import { defineComponent, ref } from '@nuxtjs/composition-api'
+import { Portal as VTeleport } from 'portal-vue'
 
 import { ensureFocus, getFirstTabbableIn } from '~/utils/reakit-utils/focus'
 
-import VTeleport from '~/components/VTeleport/VTeleport.vue'
 import VButton from '~/components/VButton.vue'
 
 /**

src/layouts/default.vue

@@ -22,6 +22,7 @@
 </template>
 <script>
 import { computed, provide, ref, watch } from '@nuxtjs/composition-api'
+import { PortalTarget as VTeleportTarget } from 'portal-vue'
 
 import { useWindowScroll } from '~/composables/use-window-scroll'
 import { useMatchSearchRoutes } from '~/composables/use-match-routes'
@@ -34,7 +35,6 @@ import VHeader from '~/components/VHeader/VHeader.vue'
 import VModalTarget from '~/components/VModal/VModalTarget.vue'
 import VSidebarTarget from '~/components/VModal/VSidebarTarget.vue'
 import VGlobalAudioSection from '~/components/VGlobalAudioSection/VGlobalAudioSection.vue'
-import VTeleportTarget from '~/components/VTeleport/VTeleportTarget.vue'
 
 const embeddedPage = {
   name: 'embedded',