Create a component you want to render inside the ionic modal.
@/components/modal.vue
<template>
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
This is a modal
</ion-content>
</template>
<script>
import { IonContent, IonHeader, IonTitle, IonToolbar } from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "Modal",
components: { IonContent, IonHeader, IonTitle, IonToolbar },
});
</script>
Create a modal instance and method to open the modal
@/views/Home.vue
<template>
<ion-page>
<ion-header :translucent="true">
<ion-toolbar>
<ion-title>Ionic Vue Modal Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-button @click="openModal">Open Modal</ion-button>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonButton,
modalController,
} from "@ionic/vue";
import { defineComponent } from "vue";
import Modal from "@/components/modal.vue";
export default defineComponent({
name: "Home",
components: {
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar,
IonButton,
},
setup() {
const openModal = async () => {
const modal = await modalController.create({
component: Modal, //Modal is name of the component to render inside ionic modal
});
return modal.present();
};
return { openModal };
},
});
</script>
- Import modalController from @ionic/vue.
- Import component Modal from @/components/modal.vue.
- Create method openModal to present the modal when "Open Modal" button is clicked.
Create method to close the modal
@/components/modal.vue
<template>
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
This is a modal <br />
<ion-button @click="closeModal">Close Modal</ion-button>
</ion-content>
</template>
<script>
import {
IonContent,
IonHeader,
IonTitle,
IonToolbar,
IonButton,
modalController,
} from "@ionic/vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "Modal",
components: { IonContent, IonHeader, IonTitle, IonToolbar, IonButton },
setup() {
const closeModal = () => {
modalController.dismiss();
};
return { closeModal };
},
});
</script>
- Import modalController from @ionic/vue.
- Create method closeModal to dismiss the modal when "Close Modal" button is clicked.
Top comments (2)
thanks, it's really helpful
Hi,
the sample code seems not working. the Modal view displays as a blank screen.