fix(vue): do not hide page content when using ion-page in non-routing contexts (#22302)

resolves #22300

packages/vue/src/components/IonPage.ts

@@ -2,12 +2,16 @@ import { h, defineComponent } from 'vue';
 
 export const IonPage = defineComponent({
   name: 'IonPage',
-  setup(_, { attrs, slots }) {
+  props: {
+    isInOutlet: { type: Boolean, default: false }
+  },
+  setup(props, { attrs, slots }) {
     return () => {
+      const hidePageClass = (props.isInOutlet) ? 'ion-page-invisible' : '';
       return h(
         'div',
         {
-          ['class']: 'ion-page ion-page-invisible',
+          ['class']: `ion-page ${hidePageClass}`,
           ...attrs,
           ref: 'ionPage'
         },

packages/vue/src/components/IonRouterOutlet.ts

@@ -301,7 +301,7 @@ export const IonRouterOutlet = defineComponent({
       'ion-router-outlet',
       { ref: 'ionRouterOutlet' },
       // TODO types
-      components && components.map((c: any) => h(c.vueComponent, { key: c.pathname }))
+      components && components.map((c: any) => h(c.vueComponent, { key: c.pathname, isInOutlet: true }))
     )
   }
 });

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

@@ -1,19 +1,22 @@
 <template>
-  <ion-header>
-    <ion-toolbar>
-      <ion-buttons>
-        <ion-button @click="dismiss">Dismiss</ion-button>
-      </ion-buttons>
-      <ion-title>Modal</ion-title>
-    </ion-toolbar>
-  </ion-header>
-  <ion-content class="ion-padding">
-    {{ title }}
-  </ion-content>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-button @click="dismiss">Dismiss</ion-button>
+        </ion-buttons>
+        <ion-title>Modal</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      {{ title }}
+    </ion-content>
+  </ion-page>
 </template>
 
 <script lang="ts">
 import {
+  IonPage,
   IonButton,
   IonButtons,
   IonContent,
@@ -30,6 +33,7 @@ export default defineComponent({
     title: { type: String, default: 'Default Title' }
   },
   components: {
+    IonPage,
     IonButton,
     IonButtons,
     IonContent,