bug: Ionic + Vue: Overlapping <ion-page> After Navigation (Display: inline)

[arpitpatel901]

Prerequisites

• 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

v8.x

Current Behavior

When navigating from “web-home” → “login,” both elements remain in the DOM at display: inline;. The old “web-home” is visibly stacked underneath the “login” page.
Manually refreshing the browser removes the “web-home” , leaving only the “login” page, which then appears correctly.
Going back from “login” triggers an Ionic warning that the path /web-home “does not have the required component,” even though is present in WebHome.vue. It suggests Ionic isn’t recognizing it for some reason.

Expected Behavior

Navigating to “login” should animate or transition away from “web-home” so the old is removed (or hidden) before the new one appears.There should only be one active in the DOM at a time for the active route, avoiding any visual overlap.

Steps to Reproduce

I’ve created a minimal sample project here:
https://github.com/arpitpatel901/tlbot_frontend/tree/sample_project

Simply clone it, checkout sample_project branch, run npm install and npm run dev

Then try to navigate from localhost:5173/ -> localhost:5173/login from the navbar

Code Reproduction URL

https://github.com/arpitpatel901/tlbot_frontend/tree/sample_project

Ionic Info

arpit@arpit-Precision-5540:~/Desktop/AI_Experiments/tlbot_website/frontend$ ionic info
[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 7.2.0

Utility:

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

System:

   NodeJS : v20.18.0
   npm    : 10.8.2
   OS     : Linux 5.15

Additional Information

No response