presentingElement with Vue

Ionic Framework
1

Has anyone successfully figured out which element to pass as presentingElement when calling modalController.create() in Vue? I’m trying to get the iOS 13 stacked modal behavior I see in the modal demo here.

I’ve tried the <ion-router-outlet> element, that didn’t work. I’m passing swipeToClose: true.

1 Like
2

Hello fellow developer,
this probably isn’t relevant to you anymore, because this post is kind of old but I figured it out and thought that it could be helpful to others facing the same problem.

You have to set a ref attribute on the parent element and then you just pass this.$refs[YOUR REFERENCED ELEMENT].$el, in presentingElement.

So in my case the code looks like this:

<template>
  <ion-page ref="myPage">
    <ion-header>
      <ion-toolbar>
        <ion-title>My Page</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content :fullscreen="true">
      <ion-button @click="openModal">Open Modal</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import {...} from '@ionic/vue';
import { defineComponent, ref } from 'vue'
import ModalView from './ModalView.vue'

export default defineComponent({
  name: 'ListsView',
  components: {...},
  methods: {
    async openModal() {
      const modal = await modalController.create({
        component: ModalView,
        swipeToClose: true,
        presentingElement: this.$refs.myPage.$el
      })
      return modal.present()
    }
  },
  setup() {...}
  data() {...}
})
</script>