@click not working inside LazyHydrate

[gutisalex]

Is there a reason why @click listener not working when they are sitting in a component wrapped with LazyHydrate? I have a Navigation which has Navigationitems fetched from an API. First time routing to the page everything works fine. After pagerefresh it doesnt... any idea?

[b-karapet]

Hi @gutisalex, I faced with the same issue

The reason of issue was that I used <LazyHydrate on-interaction> which is the same as <LazyHydrate on-interaction="focus"> Focus is used by default

Try to use <LazyHydrate on-interaction="click">

[neatcoding]

I had the same problem - indeed 'click' made it hydrate, but didn't call the @click callback.

• On mobile - adding "touchstart" helps
• On desktop - adding "mousedown" helps (or "mouseover")

So if you have the same problem with @click:

<LazyHydrate :on-interaction=["click", "focus", "touchstart", "mousedown"]>

or

import { hydrateOnInteraction } from 'vue-lazy-hydration';
export default {
  components: {
    ComponentName: hydrateOnInteraction(() => import(
      '~/components/path/ComponentName.vue'
    ), {event: ['click', 'focus', 'touchstart', 'mousedown']}),
  },
}