Overlapping <ion-page> with single (<ion-app> + <ion-router-outlet>)

Ionic Framework Ionic Vue
1

Hi everyone! I’ve been stuck on an Ionic + Vue 3 + Vite issue.
One ion-page overlays another instead of transitioning away. The URL updates, but the old remains in the DOM with display: inline. Only on a manual refresh of the url does the old page disappear.

Behavior: Navigating from “web-home” → “login” leaves both elements stacked. In DevTools, both show display: inline;. Refreshing removes the old page as expected.
Warning: [Ionic Warning]: The view for path /web-home does not have the required component… even though is clearly in WebHome.vue.

I have created a sample_project to demonstrate the problem.
Repo: https://github.com/arpitpatel901/tlbot_frontend/tree/sample_project
Branch: sample_project
Setup:
Ionic 8.4.1
Single + in App.vue
Standard Vue Router from @ionic/vue-router
Each page has , but transitions still stack pages.

Does anyone know why might not be recognized, or how to avoid the “inline stacking” issue?

2

What’s up with this:

router.afterEach(() => {
  nextTick(() => {
    document.querySelector('#main .ion-page.ion-page-invisible')
      ?.classList.remove('ion-page-invisible');
  });
});

On a side note, you don’t typically want to use child routes (children ) unless using Ionic Tabs. You can review the docs here on this - Vue Navigation: Use Ionic + Vue Router to Create Multi-Page Apps.

3

@twestrick Thanks for looking into this !

Sorry, that was one of fix that worked for someone else here, so I tried that. But that problem seems to have been related to the older ionic versions, so I removed that piece of code, but no change.

Still having the issue.

I have looked at the page you mentioned. Ideally children routes should not cause the problem since the issue occurs before that [transitioning from WebHome->Login page]. I am trying to make sure I follow the ideal ionic principles - 1 Ion-App, 1 Ion-Router and each view having IonPage at the top layer.

4

My understanding is that the pattern of multiple pages in DOM, is expected, as the ionic will open a new page for every view. Its kept in the DOM for keeping history and faster navigation. However, but the display style should change - to ion-invisible or something like that. Maybe apply a custom class to it…not sure about that part.

5

Just looked in my app (Ionic 8 with Vue) and hidden pages get a ion-page-hidden class. Not having an IonPage wrapping everything in each view can cause navigation issues (you must have an IonPage for every view). I briefly checked your code and seems like you are using IonPage everywhere. Maybe double check?

6

I was able to solve this problem. There was a bug in vite.config.js, which I did not realize, nothing to do with Ionic.
Thank you for taking the time to look into it.

1 Like