feat: Swipeable Modals ionic vue

[EslamNemr]

Feature Request

**Ionic version:5.6.11

Describe the Feature Request Swipeable Modals support in ionic vue like react and angular.

[liamdebeasi]

Thanks for the issue. Swipable modals are already supported in Ionic Vue. Is something not working or are you getting an error?

[EslamNemr]

its not cleared in documentation of vue https://ionicframework.com/docs/api/modal the implementation of it.

[liamdebeasi]

Ah thanks! Looks like we need a code example.

[liamdebeasi]

Thanks for the issue. I added more documentation for this in https://github.com/ionic-team/ionic-framework/pull/23628, and the updates should be live on our docs site with the next patch release of Ionic Framework.

In the meantime, here is an example of how to get the card style modal working in your Ionic Vue application:

<template>
  <ion-page>
    <ion-content>
      <ion-button @click="setOpen(true)">Show Modal</ion-button>
      <ion-modal
        :is-open="isOpenRef"
        css-class="my-custom-class"
        :swipe-to-close="true"
        :presenting-element="$parent.$refs.ionRouterOutlet"
        @didDismiss="setOpen(false)"
      >
        <Modal :data="data"></Modal>
      </ion-modal>
    </ion-content>
  </ion-page>
</template>
<script lang="ts">
import { IonModal, IonButton, IonContent, IonPage } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import Modal from './modal.vue'
export default defineComponent({
  components: { IonModal, IonButton, Modal, IonContent, IonPage },
  setup() {
    const isOpenRef = ref(false);
    const setOpen = (state: boolean) => isOpenRef.value = state;
    const data = { content: 'New Content' };
    return { isOpenRef, setOpen, data }
  }
});
</script>

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.