fix: @vueuse/head doesn't function properly with ionic

[callumacrae]

🐛 The bug

Hey!

Not using this project, but had a problem on another project I think you'll run into so figured I'd make you aware as it's not immediately obvious

https://ionicframework.com/docs/vue/lifecycle#how-ionic-framework-handles-the-life-of-a-page

The way ionic handles the lifecycle of a page is very different to how vue does it, and as a consequence of this, the onBeforeMount hook isn't always called when you'd expect it to be.

To replicate, go to the stackblitz below, inspect the <title> of the ionic app, and click between the first and second tabs a few times. You'll notice that the title stops updating. This is because the old tab still exists in the dom.

It looks like you can probably work around this by importing injectHead from @vueuse/head, onIonViewWillLeave from @ionic/vue and creating your own useHead function that handles the teardown (and setting up again, potentially) with the correct hook. I haven't actually tried this though as I gave up and went back to doing everything manually.

export const useHead = (obj: MaybeRef<HeadObject>) => {
  const headObj = ref(obj) as Ref<HeadObjectPlain>
  const head = injectHead()

  head.addHeadObjs(headObj)

  if (IS_BROWSER) {
    watchEffect(() => {
      head.updateDOM()
    })

    onIonViewDidEnter(() => {
      head.addHeadObjs(headObj)
      head.updateDOM()
    })

    onIonViewWillLeave(() => {
      head.removeHeadObjs(headObj)
      head.updateDOM()
    })
  }
}

Something like this! The onIonViewDidEnter is required for when a user goes back to a page which has been fake-unmounted by ionic. The addHeadObjs can probably be deduplicated but as I said, I haven't tested this!

(vue-meta has the same problem)

🛠️ To reproduce

https://stackblitz.com/edit/github-xdesgf-6vva3r?file=pages%2Ftabs.vue,pages%2Ftabs%2Ftab1.vue,pages%2Ftabs%2Ftab2.vue,pages%2Ftabs%2Ftab3.vue

🌈 Expected behaviour

ℹ️ Additional context

No response

[riderx]

Got this problem long time ago, before this module even exist, and the only option was to remove all ionic routing. they are thinking of a solution as you can see here: https://github.com/ionic-team/ionic-framework/issues/25184

[callumacrae]

Got this problem long time ago, before this module even exist, and the only option was to remove all ionic routing. they are thinking of a solution as you can see here: ionic-team/ionic-framework#25184

Did you try anything like the workaround suggested in the issue? As much as I think ionic's routing has and causes problems, I don't think removing it entirely is a viable workaround.

Also, for what it's worth, I'm overriding the routing from the tab-bar component - in this case for a different reason (I want to call router.replace, not router.push), but it should work for your case too:

// Use router.replace to tear down all the components that ionic left alive
const router = useIonRouter();
function handleClick(tab: Tab) {
  router.replace(tab.href);
}

  <IonTabBar>
    <IonTabButton
      v-for="tab in tabs"
      :key="tab.name"
      :tab="tab.name"
      :href="tab.href"
      :selected="selectedTab === tab"
      @click.prevent="handleClick(tab)"
    >
      <IonLabel>{{ tab.label }}</IonLabel>
    </IonTabButton>
  </IonTabBar>

[riderx]

@callumacrae the problem is even deeper for me because i want to use nested routing and that not possible in ionic-router. The good part is they are working on a solution to make it more flexible.