Ionic Vue 6.0 ionViewDidEnter Not working

Ionic Framework Ionic Vue
1

neither ionViewWillEnter nor onIonViewWillEnter are triggered.
My ionic Vue version is 6.0

export default defineComponent({
name: ‘App’,
ionViewDidEnter () {
console.trace(“Did Enter”);
},

ionViewWillEnter () {
console.trace(“Will Enter”);
},

components: {
IonApp,
IonCol, IonGrid, IonRow,
IonSegment, IonSegmentButton,
IonContent,
// IonIcon,
// IonItem,
IonLabel,
// IonList,
// IonListHeader,
// IonMenu,
// IonMenuToggle,
// IonNote,
// IonRouterOutlet,
// IonSplitPane,
},
setup() {

// const selectedIndex = ref(0);
// const appPages = [
//   {
//     title: 'Inbox',
//     url: '/folder/Inbox',
//     iosIcon: mailOutline,
//     mdIcon: mailSharp
//   }
// ];
// const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];

// const path = window.location.pathname.split('folder/')[1];
// if (path !== undefined) {
//   selectedIndex.value = appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
// }

const route = useRoute();

onIonViewWillEnter(() => {
  console.log('Entered tab!');
});

return { 
  // selectedIndex,
  // appPages, 
  // labels,
  archiveOutline, 
  archiveSharp, 
  bookmarkOutline, 
  bookmarkSharp, 
  heartOutline, 
  heartSharp, 
  mailOutline, 
  mailSharp, 
  paperPlaneOutline, 
  paperPlaneSharp, 
  trashOutline, 
  trashSharp, 
  warningOutline, 
  warningSharp,
  isSelected: (url: string) => url === route.path ? 'selected' : '', 
}

}
});

2

Did you import ionViewWillEnter and ionViewDidEnter from @ionic/vue?

VSCode adds the import for me automatically when I add it to my vue component.

3

Yes sir. I am also using VSCode, it automatically imported.

4

The Lifecycle events only fire if you are using the IonPage component.

Pages in your app need to be using the IonPage component in order for lifecycle methods and hooks to fire properly. - Source

5

Thanks for the info.

Unfortunately, it does not work as well. I already wrap ion-page under tag.

6

Can you provide the full component that you are having issues with with the template/html portion as well? Please use proper Markdown for code snippets too - link :slight_smile:

7

What I have seen is that onIonViewWillEnter only works at the top level component which contains the page.

For example, if you have MyComponent:

<template>
   <ion-page>
      ...etc
   </ion-page>
</template>

And MyPage is the component routed to:

<template>
  <MyComponent />
</template>

onIonViewWillEnter will not work in MyComponent, but does work in MyPage.

9

Yup, seeing this as well. Is there a work around?

10

I remember I managed to fixed it by starting a blank new project.

But already give up ionic due to the poor community supports. And looks like their documentation is still not ready.

I switch to other hybrid framework with is more powerful.

Good luck

11

First, I’ve only worked with Vue in Ionic so I am not sure how the other frameworks work, but I believe having the Ionic lifecycle events only fire on the top level view/page is by design.

I think it depends on what you are trying to do. If you are trying to refresh some data, you could have the view/page do that and pass it down to the child component. Another option is to pass a prop down to the child and when it changes, have the child run some logic. For my app, all of my sub components either get data passed in or they pull from my Vuex store so they are always reactive.

Can you give a little more detail of what you are trying to do?