Navigating inside modal

Ionic Framework Ionic Vue
1

Hello, how to navigate between pages inside single modal? I found some blog post about doing this in angular, but couldn’t find any example of this in Vue. It should be possible, I just don’t know where to start.
Thanks.

2

I think you’d have to do an onclick event where you close the modal first and then navigate to the next page. Something like…

modalController.dismiss();
this.$router.push("nextPage");

3

Wouldn’t this close the modal? I need to navigate inside it without closing it.

4

Ok I didnt understand your question then. Is that even possible? Modals are meant to take over the screen. It sounds like you want it to act as a page.

5

It is definitely possible. I just don’t know how to do it in Vue.

6

I see. A workaround would be to open modal 1, have modal 2 and 3 buttons inside modal one. And repeat that for each modal.

1 Like
7

We definitely need better usage docs for ion-nav, but for now here is how to do it in Vue: ionic-framework/Nav.vue at 3a0465e7d6f9e3cb01336a8bdbd7001e4ec34559 · ionic-team/ionic-framework · GitHub

The property names are all the same as in the tutorial you linked to on the Ionic Blog, just be sure to pass in Vue components.

One area for improvement on our end is to make it easier to access the nav instance. Right now we just use a querySelector.

3 Likes
8

Thank you. It works as expected.

9

I loved that tutorial. Nevertheless I opted to hack myself into happiness by applying a sideways animation on a modal in the modal. So stacking modals through my own sidemodal controller

It just feels odd to have an abstract like extra component to cater for the ion-nav

And yes, i am sure i am likely to regret this choice in the future

If this can become a bit more dx friendly through changes in Ionic, that would be cool

1 Like
10

Working on the same thing now myself. Here’s a tutorial specifically for modal navigation in Vue by Aaron Saunders.
(No sign in is required btw, don’t know why the link appears that way.)

1 Like
11

@ldebeasi Is this still the recommended approach for navigation within a modal with Ionic 6 and Vue? Or is it possible now to do it using ion-modal router-link without having to access the nav instance via querySelector?

Thanks!

12

I saw this tutorial by Simon Grim, made in Angular. Does anyone perhaps know how to do the same with ReactJS.