bug: Deprecation warning regarding "ion-router-outlet required" is incorrectly displayed.

[mp035]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When a developer includes ion-router-outlet inside of ion-tabs the following message is displayed:

[@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.

However, when the ion-router-outlet is removed, the warning goes away.

Expected Behavior

The warning should be displayed when ion-router-outlet is not included, and suppressed when ion-router-outlet is included. (i.e. the message suppression state is inverted)

Steps to Reproduce

Run the default, empty ionic 5 tabs application:

ionic start bugtest tabs --type=vue
cd bugtest
ionic serve

And then open the browser console to view the error. It is present even though the template has an ion-router-outlet in the tabs. Removing ion-router-outlet suppresses the message.

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI       : 6.16.3 (/home/mark/.nvm/versions/node/v14.17.3/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.6.12

Capacitor:

   Capacitor CLI      : 3.1.2
   @capacitor/android : not installed
   @capacitor/core    : 3.1.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.0

System:

   NodeJS : v14.17.3 (/home/mark/.nvm/versions/node/v14.17.3/bin/node)
   npm    : 6.14.13
   OS     : Linux 5.10

Additional Information

The error is in the source code of
ionic-framework/packages/vue/src/components/IonTabs.ts on line 37:
This line:
if (userProvidedRouterOutlet && !$data.didWarn) {
should be
if (!userProvidedRouterOutlet && !$data.didWarn) {

[liamdebeasi]

Thanks for the issue. This has been resolved via #23724, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.