DEV Community

Amit Gurbani
Amit Gurbani

Posted on

Creating a Modal in Ionic Vue

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>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode
  1. Import modalController from @ionic/vue.
  2. Import component Modal from @/components/modal.vue.
  3. 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>
Enter fullscreen mode Exit fullscreen mode
  1. Import modalController from @ionic/vue.
  2. Create method closeModal to dismiss the modal when "Close Modal" button is clicked.

Top comments (2)

Collapse
 
nnivxix profile image
Hanasa

thanks, it's really helpful

Collapse
 
hpwahyao profile image
hpwahyao

Hi,

the sample code seems not working. the Modal view displays as a blank screen.