@j2only/ionic-disable-swipe-back

Important Notice

@j2only/ionic-disable-swipe-back is not compatible with Ionic Vue 8.x

Reason: Starting from Ionic Vue 8, the internal gesture system and routing mechanisms have been significantly refactored. The createGesture API is no longer exposed in @ionic/vue and custom gestures can no longer interact with or override the swipe-back navigation gesture. As a result, this package no longer works as intended.

Why there is no workaround: Ionic Vue 8 does not provide any official public API for disabling the swipe-back gesture on specific pages or globally. All gesture controls are now managed internally by the framework. Any attempts to disable swipe-back require hacking internal, undocumented properties, which are unstable and may break at any time. Therefore, at this time, there is no reliable or officially supported way to disable the swipe-back gesture in Ionic Vue 8.

Recommendation: If you rely on disabling swipe-back, please do not upgrade to Ionic Vue 8, or consider switching to Ionic Angular, where this functionality is still officially supported.

Installation

Install this component via package manager:

yarn add @j2only/ionic-disable-swipe-back

Usage

Import the component in your app. Example of the main.ts file in your ionic vue project:

<script setup lang="ts">
    import App from "./App.vue" import {DisableSwipeBackDirective} from
    "@j2only/ionic-disable-swipe-back" const app = createApp(App)
    .directive("disable-swipe-back", DisableSwipeBackDirective)
    app.mount("#app")
</script>

In vue template include directive in ion-page

<template>
    <ion-page v-disable-swipe-back> ... </ion-page>
</template>

Licensing

MIT License Forked from @Sitronik/v-disable-swipe-back, Sitronik, MIT License