fix(vue): IonTabs can now accept IonRouterOutlet (#23477)

resolves #23321

packages/vue/src/components/IonTabs.ts

@@ -7,9 +7,22 @@ const DID_CHANGE = 'ionTabsDidChange';
 export const IonTabs = defineComponent({
   name: 'IonTabs',
   emits: [WILL_CHANGE, DID_CHANGE],
+  data() {
+    return { didWarn: false }
+  },
   render() {
-    const { $slots: slots, $emit } = this;
+    const { $slots: slots, $emit, $data } = this;
     const slottedContent = slots.default && slots.default();
+    let userProvidedRouterOutlet;
+
+    if (slottedContent && slottedContent.length > 0) {
+      /**
+       * If developer passed in their own ion-router-outlet
+       * instance, then we should not init a default one
+       */
+      userProvidedRouterOutlet = slottedContent.find((child: VNode) => child.type && (child.type as any).name === 'IonRouterOutlet');
+    }
+
     let childrenToRender = [
       h('div', {
         class: 'tabs-inner',
@@ -18,18 +31,52 @@ export const IonTabs = defineComponent({
             'flex': '1',
             'contain': 'layout size style'
         }
-      }, [
-        h(IonRouterOutlet, { tabs: true })
-      ])
+      }, (userProvidedRouterOutlet) ? userProvidedRouterOutlet : [h(IonRouterOutlet, { tabs: true })])
     ];
 
+    if (userProvidedRouterOutlet && !$data.didWarn) {
+      console.warn(`[@ionic/vue Deprecation] Starting in Ionic Vue v6.0, developers must add an 'ion-router-outlet' instance inside of 'ion-tabs'.
+
+      Before:
+
+      <ion-tabs>
+        <ion-tab-bar slot="bottom">
+          ...
+        </ion-tab-bar>
+      </ion-tabs>
+
+      After:
+
+      <ion-tabs>
+        <ion-router-outlet></ion-router-outlet>
+        <ion-tab-bar slot="bottom">
+          ...
+        </ion-tab-bar>
+      </ion-tabs>
+
+      Be sure to import 'IonRouterOutlet' from '@ionic/vue' and provide that import to your Vue component. See https://ionicframework.com/docs/vue/navigation#working-with-tabs for more information.
+      `);
+
+      $data.didWarn = true;
+    }
+
     /**
      * If ion-tab-bar has slot="top" it needs to be
      * rendered before `.tabs-inner` otherwise it will
      * not show above the tab content.
      */
     if (slottedContent && slottedContent.length > 0) {
-      const slottedTabBar = slottedContent.find((child: VNode) => child.type && (child.type as any).name === 'IonTabBar');
+
+      /**
+       * Render all content except for router outlet
+       * since that needs to be inside of `.tabs-inner`.
+       */
+      const filteredContent = slottedContent.filter((child: VNode) => (
+        !child.type ||
+        (child.type && (child.type as any).name !== 'IonRouterOutlet')
+      ));
+
+      const slottedTabBar = filteredContent.find((child: VNode) => child.type && (child.type as any).name === 'IonTabBar');
       const hasTopSlotTabBar = slottedTabBar && slottedTabBar.props?.slot === 'top';
 
       if (slottedTabBar) {
@@ -49,13 +96,13 @@ export const IonTabs = defineComponent({
 
       if (hasTopSlotTabBar) {
         childrenToRender = [
-          ...slottedContent,
+          ...filteredContent,
           ...childrenToRender
         ];
       } else {
         childrenToRender = [
           ...childrenToRender,
-          ...slottedContent
+          ...filteredContent
         ]
       }
     }

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

@@ -118,7 +118,7 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/tabs-new/',
-    component: () => import('@/views/Tabs.vue'),
+    component: () => import('@/views/TabsNew.vue'),
     children: [
       {
         path: '',

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

@@ -0,0 +1,54 @@
+<template>
+  <ion-page data-pageid="tabs">
+    <ion-content>
+      <ion-tabs id="tabs">
+        <ion-router-outlet></ion-router-outlet>
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button
+            v-for="tab in tabs"
+            :tab="'tab' + tab.id"
+            :href="'/tabs-new/tab' + tab.id"
+            :key="tab.id"
+          >
+            <ion-icon :icon="tab.icon" />
+            <ion-label>Tab {{ tab.id }}</ion-label>
+          </ion-tab-button>
+
+          <ion-button id="add-tab" @click="addTab()">Add Tab</ion-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { IonButton, IonTabBar, IonTabButton, IonTabs, IonContent, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
+import { ellipse, square, triangle, shield } from 'ionicons/icons';
+import { useRouter } from 'vue-router';
+import { ref, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Tabs',
+  components: { IonButton, IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage, IonRouterOutlet },
+  setup() {
+    const tabs = ref([
+      { id: 1, icon: triangle },
+      { id: 2, icon: ellipse },
+      { id: 3, icon: square }
+    ])
+    const router = useRouter();
+    const addTab = () => {
+      router.addRoute({ path: '/tabs/tab4', component: () => import('@/views/Tab4.vue') });
+      tabs.value = [
+        ...tabs.value,
+        {
+          id: 4,
+          icon: shield
+        }
+      ]
+    }
+
+    return { tabs, addTab }
+  }
+});
+</script>