bug: IonRefresher Does Not Work: It spins forever

[IwanToTeW]

Describe the Bug

I am using the following dependancies

"dependencies": { "@capacitor/android": "^7.0.0", "@capacitor/app": "^7.0.0", "@capacitor/core": "^7.0.0", "@capacitor/device": "^7.0.0", "@capacitor/haptics": "^7.0.0", "@capacitor/ios": "^7.0.0", "@capacitor/keyboard": "^7.0.0", "@capacitor/push-notifications": "^7.0.0", "@capacitor/status-bar": "^7.0.0", "@headlessui/vue": "^1.7.19", "@ionic/vue": "^8.3.1", "@ionic/vue-router": "^8.3.1", "@primevue/themes": "^4.2.4", "@rive-app/canvas": "^2.19.6", "axios": "^1.7.8", "flag-icons": "^7.3.2", "ionicons": "^7.0.0", "pinia": "^2.1.7", "primevue": "^4.2.4", "vue": "^3.3.0", "vue-i18n": "^10.0.6", "vue-router": "^4.2.0", "vue3-toastify": "^0.2.1", "ziggy-js": "^1.0.5" },

I have this mobile layout and I want to implement a refresher for my app

`<script lang="ts" setup>
import {IonContent, IonPage, IonRefresher, IonRefresherContent} from '@ionic/vue';
import VirtualWoodlandModal from "@/components/Shared/VirtualWoodlandModal.vue";

const handleRefresh = (event: CustomEvent) => {
console.log('handleRefresh');
// setTimeout(() => {
// event.detail?.complete();
// }, 1000);
};
</script>

<ion-content>
  <ion-refresher
    slot="fixed"
    :pull-factor="0.5"
    :pull-max="150"
    :pull-min="100"
    @ionRefresh="handleRefresh($event)"
  >
    <ion-refresher-content />
  </ion-refresher>
  <slot />
</ion-content>
<VirtualWoodlandModal />

<slot name="footer" />

`

When I remove the import for IonRefresher the code works and I can see handleRefresh being executed. If i import it then it breaks and the refresher spins forever. My console log is not displayed.

Can someone look into it or point if I am doing anything wrong?

Expected Behavior

I would expect the handle function to be called when I pull down

Steps to Reproduce

• Add a refresher
• Import the IonRefresh
• Pull down the screen and the handle function is not being callled.

Alternatively if you do the following steps it works:

• Add a refresher
• Do not import the IonRefresh
• Pull down the screen and the handle function is being callled.

Screenshots

No response

Operating System

Mac

Browser

Chrome

Version

134

Additional Information

No response

[IwanToTeW]

Just tested with ionic/vue: 8.5.0 and ionic/vue-router: 8.5.0 and it works

The problem was because older versions of those two libraries were used. I am not sure if there is a further action required here or this can be closed off.

[ionitron-bot]

Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for content issues, bug reports and feature requests related to the documentation. Please use our forum for help or questions about Ionic Framework.

Thank you for using Ionic!