How to Navigate in Ionic Modals with ion-nav in VueJS

Overview

Home Component

<ion-content :fullscreen="true" class="ion-padding">
<ion-button @click="setOpen(true)">Show Modal With Nav</ion-button>
<ion-modal
:is-open="isOpenRef"
@onDidDismiss="setOpen(false)"
>
<base-modal :rootPage="ModalHome"></base-modal>
</ion-modal>
</ion-content>
import { ... } from "@ionic/vue";
import { defineComponent, ref } from "vue";
import BaseModal from "./BaseModal.vue";
// root page component defined here
import ModalHome from "./ModalHome.vue";
export default defineComponent({
name: "Home",
setup() {
const isOpenRef = ref(false);
const setOpen = (state: boolean) => (isOpenRef.value = state);
return { isOpenRef, setOpen, ModalHome };
},
components: { ... }
});

BaseModal Component

<template>
<div>
<ion-nav :root="rootPage" id="modal-nav"></ion-nav>
</div>
</template>
<script>
import { defineComponent } from "vue";
import { IonNav } from "@ionic/vue";
export default defineComponent({
name: "BaseModal",
components: {
IonNav
},
props: ["rootPage"],
});
</script>

ModalHome Component

<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons slot="end">
<ion-button @click="closeModal">CLOSE</ion-button>
</ion-buttons>
<ion-title>MODAL HOME</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h2>MODAL HOME</h2>
<ion-button @click="nextPage">SHOW MODAL DETAIL</ion-button>
</ion-content>
</ion-page>
import { defineComponent, ref, onMounted } from "vue";
import { ... } from "@ionic/vue";
// the detail page
import ModalHomeDetailVue from "./ModalHomeDetail.vue";
export default defineComponent({
name: "ModalHome",
components: { ... },
setup() {
// the nav ref
const modalNav = ref(null);
// get the the ion-nav element so we can make
// api calls using ion-nav
onMounted(() => {
const v = document.getElementById("modal-nav");
modalNav.value = v;
});
/**
* when going to the next page, I pass the nav as a property
* so I don't need to get it from the document again
*/
const nextPage = () => {
modalNav.value.push(ModalHomeDetailVue, {
// these come across as properties on the component
modalNav: modalNav
});
};
/**
* close the modal dialog
*/
const closeModal = async () => {
await modalController.dismiss();
};
return {
nextPage,
closeModal
};
}
});

ModalHomeDetail Component

<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons slot="start">
<ion-button @click="goBack">BACK</ion-button>
</ion-buttons>
<ion-title>MODAL HOME DETAIL</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h2>MODAL HOME DETAIL</h2>
</ion-content>
</ion-page>
import { defineComponent } from "vue";
import { ... } from "@ionic/vue";
export default defineComponent({
name: "ModalHomeDetail",
components: { ... },
props: [ "modalNav"],
setup(props) {
/**
* get the nav from the props and go back
*/
const goBack = () => {
const nav = props.modalNav.value;
nav.pop();
};
return {
goBack
};
}
});

Test On Device

ionic build
ionic cap add android
ionic cap add ios
ionic cap run ios --livereload

Source Code

💥 Additional Content

💥 Social Media

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store