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.