fix(vue): modal, popover, and nav are now created within application context (#22282)

resolves #22079

packages/vue/test-app/src/components/Nav.vue

@@ -0,0 +1,16 @@
+<template>
+  <ion-nav :root="NavRoot"></ion-nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { IonNav } from '@ionic/vue';
+import NavRoot from '@/components/NavRoot.vue';
+
+export default defineComponent({
+  components: { IonNav },
+  setup() {
+    return { NavRoot }
+  }
+});
+</script>

packages/vue/test-app/src/components/NavChild.vue

@@ -0,0 +1,39 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons>
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Nav - Child</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding" id="nav-child-content">
+    {{ title }}
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonButtons,
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: { type: String, default: 'Default Title' }
+  },
+  components: {
+    IonButtons,
+    IonBackButton,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar
+  }
+})
+</script>

packages/vue/test-app/src/components/NavRoot.vue

@@ -0,0 +1,47 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons>
+        <ion-button @click="dismiss">Dismiss</ion-button>
+      </ion-buttons>
+      <ion-title>Nav - Root</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content class="ion-padding">
+    <ion-button expand="block" @click="pushPage" id="push-nav-child">Go to Nav Child</ion-button>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import NavChild from '@/components/NavChild.vue';
+
+export default defineComponent({
+  components: {
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonTitle,
+    IonToolbar
+  },
+  methods: {
+    pushPage: function() {
+      const ionNav = document.querySelector('ion-nav') as any;
+      ionNav.push(NavChild, { title: 'Custom Title' });
+    },
+    dismiss: async function() {
+      await modalController.dismiss();
+    }
+  }
+})
+</script>

packages/vue/test-app/src/router/index.ts

@@ -27,13 +27,16 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('@/views/DefaultHref.vue')
   },
   {
-    path: '/navigation',
-    name: 'Navigation',
-    component: () => import('@/views/Navigation.vue')
+    path: '/routing',
+    component: () => import('@/views/Routing.vue')
   },
   {
-    path: '/navigation/child',
-    component: () => import('@/views/NavigationChild.vue')
+    path: '/routing/child',
+    component: () => import('@/views/RoutingChild.vue')
+  },
+  {
+    path: '/navigation',
+    component: () => import('@/views/Navigation.vue')
   },
   {
     path: '/nested',
@@ -81,7 +84,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/Tab3.vue')
       }
     ]
-  }
+  },
 ]
 
 const router = createRouter({

packages/vue/test-app/src/views/Home.vue

@@ -26,6 +26,9 @@
         <ion-item router-link="/navigation" id="navigation">
           <ion-label>Navigation</ion-label>
         </ion-item>
+        <ion-item router-link="/routing" id="routing">
+          <ion-label>Routing</ion-label>
+        </ion-item>
         <ion-item router-link="/default-href" id="default-href">
           <ion-label>Default Href</ion-label>
         </ion-item>

packages/vue/test-app/src/views/Navigation.vue

@@ -16,56 +16,47 @@
         </ion-toolbar>
       </ion-header>
 
-      <ion-item button @click="setRouteParams" id="route-params">
-        <ion-label>Set Route Parameters</ion-label>
-      </ion-item>
-
-      <ion-item button router-link="/navigation/child" id="child">
-        <ion-label>Go to Child Page</ion-label>
-      </ion-item>
+      <div class="ion-padding">
+        <ion-button expand="block" @click="openModal" id="open-nav-modal">Open Modal</ion-button>
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts">
 import {
+  IonButton,
   IonBackButton,
   IonButtons,
   IonContent,
   IonHeader,
-  IonItem,
-  IonLabel,
   IonPage,
   IonTitle,
-  IonToolbar
+  IonToolbar,
+  modalController
 } from '@ionic/vue';
 import { defineComponent } from 'vue';
-import { useRouter } from 'vue-router';
-
+import Nav from '@/components/Nav.vue';
 export default defineComponent({
-  name: 'Navigation',
   components: {
+    IonButton,
     IonBackButton,
     IonButtons,
     IonContent,
     IonHeader,
-    IonItem,
-    IonLabel,
     IonPage,
     IonTitle,
     IonToolbar
   },
   setup() {
-    const router = useRouter();
-    const setRouteParams = () => {
-      router.push({
-        query: {
-          search: 'liamwashere'
-        }
+    const openModal = async () => {
+      const modal = await modalController.create({
+        component: Nav
       });
-    }
 
-    return { setRouteParams }
+      await modal.present();
+    }
+    return { openModal }
   }
 });
 </script>

packages/vue/test-app/src/views/Overlays.vue

@@ -90,6 +90,7 @@
 
       <ion-modal
         :is-open="isModalOpen"
+        :componentProps="overlayProps"
         @onDidDismiss="setModalRef(false)"
       >
         <ModalContent></ModalContent>
@@ -97,6 +98,7 @@
 
       <ion-popover
         :is-open="isPopoverOpen"
+        :componentProps="overlayProps"
         :event="popoverEvent"
         @onDidDismiss="setPopoverRef(false)"
       >
@@ -231,6 +233,10 @@ export default defineComponent({
       }
     ]
 
+    const overlayProps = {
+      title: 'Custom Title'
+    }
+
     const openActionSheet = async () => {
       const actionSheet = await actionSheetController.create({ buttons: actionSheetButtons });
       await actionSheet.present();
@@ -252,12 +258,12 @@ export default defineComponent({
     }
 
     const openModal = async () => {
-      const modal = await modalController.create({ component: ModalContent });
+      const modal = await modalController.create({ component: ModalContent, componentProps: overlayProps });
       await modal.present();
     }
 
     const openPopover = async (event: Event) => {
-      const popover = await popoverController.create({ component: PopoverContent, event });
+      const popover = await popoverController.create({ component: PopoverContent, event, componentProps: overlayProps });
       await popover.present();
     }
 
@@ -309,6 +315,7 @@ export default defineComponent({
     }
 
     return {
+      overlayProps,
       present,
       componentType,
       presentationType,

packages/vue/test-app/src/views/Routing.vue

@@ -0,0 +1,70 @@
+<template>
+  <ion-page data-pageid="routing">
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Routing</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Routing</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-item button @click="setRouteParams" id="route-params">
+        <ion-label>Set Route Parameters</ion-label>
+      </ion-item>
+
+      <ion-item button router-link="/routing/child" id="child">
+        <ion-label>Go to Child Page</ion-label>
+      </ion-item>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+
+export default defineComponent({
+  components: {
+    IonBackButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  },
+  setup() {
+    const router = useRouter();
+    const setRouteParams = () => {
+      router.push({
+        query: {
+          search: 'liamwashere'
+        }
+      });
+    }
+
+    return { setRouteParams }
+  }
+});
+</script>

packages/vue/test-app/src/views/RoutingChild.vue

@@ -1,23 +1,23 @@
 <template>
-  <ion-page data-pageid="navigationchild">
+  <ion-page data-pageid="routingchild">
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-buttons>
           <ion-back-button></ion-back-button>
         </ion-buttons>
-        <ion-title>Navigation Child</ion-title>
+        <ion-title>Routing Child</ion-title>
       </ion-toolbar>
     </ion-header>
 
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
-          <ion-title size="large">Navigation Child</ion-title>
+          <ion-title size="large">Routing Child</ion-title>
         </ion-toolbar>
       </ion-header>
 
       <div class="ion-padding">
-        Navigation Child Page
+        Routing Child Page
       </div>
     </ion-content>
   </ion-page>
@@ -37,7 +37,6 @@ import { defineComponent } from 'vue';
 import { useRouter } from 'vue-router';
 
 export default defineComponent({
-  name: 'NavigationChild',
   components: {
     IonBackButton,
     IonButtons,