Ionic Vue Modal shows content twice

In an Ionic Vue app I’m trying to display some simple content in a modal. However the content is always displayed twice. The same happens if I use the example from the ionic page (

Modal content component:

        <ion-title>{{ title }}</ion-title>
    <ion-content class="ion-padding">
      {{ content }}

import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Modal',
  props: {
    title: { type: String, default: 'Super Modal' },
  data() {
    return {
      content: 'Content',
  components: { IonContent, IonHeader, IonTitle, IonToolbar }

Component that uses the modal:

    <ion-content class="ion-padding">
      <ion-button @click="openModal">Open Modal</ion-button>

  import { IonButton, IonContent, IonPage, modalController } from "@ionic/vue";
  import Modal from "../components/ItemModal.vue";

  export default {
    components: { IonButton, IonContent, IonPage },
    methods: {
      async openModal() {
        const modal = await modalController.create({
          component: Modal,
          cssClass: "my-custom-class",
          componentProps: {
            data: {
              content: "New Content",
            propsData: {
              title: "New title",
        return modal.present();

Funnily enough the content component of the modal is displayed twice.

modal content


Additionally, the props and data are not passed to the modal content component.

Am I missing something fundamental when using modals in Vue Ionic?


Turned out that I had two instances of ion-app in my template. Luckily this was pointed out in the Ionic Forums (unfortunately the post got removed).

For some context, we use ion-app to create your modal content inside of the Vue app context. Then, we use Vue’s Teleport functionality to render the modal content inside of ion-modal. Since you had two instances of ion-app, your modal content was being created and teleported twice.