feat: ionic vue composition lifecycle hooks

Feature Request

Ionic version:
[x] 5.x

Describe the Feature Request
Ionic lifecycle methods still not available as Vue Composition API functions, despite claims made in merged feature request #22440.

Describe Preferred Solution
Ionic lifecycle methods are currently only accessible when using the Vue options API, but for those of us coding using the Composition API and thus relying on the setup() function, these methods are not available as composition equivalents.

Related Code

<script lang="ts">
export default defineComponent({
  setup() {
      // a normal Vue lifecycle hook method
      onMounted(() => {
          // ...
      })

     // the Ionic specific lifecycle methods should always be available to access inside the setup function
     ionViewWillEnter(() => {
         // ...
     })
   }
})
</script>

Additional Context
See: https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html

3 thoughts on “feat: ionic vue composition lifecycle hooks

  1. Thanks! The use cases you provided make sense — I can see why having the onIonView hooks are useful here.

  2. Hi everyone,

    I had some time to work on this. Here is a dev build if anyone is interested in testing:

    npm install @ionic/vue@5.6.0-dev.202102241808.52d508b @ionic/vue-router@5.6.0-dev.202102241808.52d508b
    

    Usage

    <template>
      <ion-page>
        ...
      </ion-page>
    </template>
    
    <script lang="ts">
    import { IonPage, onIonViewDidEnter } from '@ionic/vue';
    import { defineComponent } from 'vue';
    
    export default defineComponent({
      ...,
      components: { IonPage },
      setup() {
        onIonViewDidEnter(() => {
          console.log('ionViewDidEnter!');
        });
      }
    });
    </script>

    As with the regular lifecycle methods, IonPage is required. I have the code and tests written, I just need to work on updated documentation. Please let me know if you find any bugs. Thanks!