Try to understand the behavior

Hello,

I use nuxtjs v2.14.3 as universal and the latest beta version of vue-lazy-hydration. I have a hidden navigation tool that I hydrate only when the tool is opened for the first time (ssr-only + trigger-hydration). It works as expected for no-mobile, but not for my mobile version (responsive). Notice that nuxtjs generates the mobile version.

To be more precise, mobile and desktop are two different lazy components, called by dynamic component syntax:

<template>
  ...
    <LazyHydrate ssr-only :trigger-hydration="onceOpenNav">
      <component :is="isMobile ? 'HeaderMainNavMobilePanel' : 'HeaderMainNavPanel'>
        ...
      </component>
    </LazyHydrate>
  ...
</template>

export default {
  components: {
    HeaderMainNavPanel: () =>
      import('~/components/layout/header/HeaderMainNavPanel/HeaderMainNavPanel'),
    HeaderMainNavMobilePanel: () =>
      import('~/components/layout/header/HeaderMainNavMobilePanel/HeaderMainNavMobilePanel'),
  },
  ...
}

My problem is resolved by commenting this line: https://github.com/maoberlehner/vue-lazy-hydration/blob/master/src/LazyHydrate.js#L160

I'm surprising because:

when I put a console.log to inspect the this.$elt here, it is effectively an empty div - but only a few times, if I log this and I inspect it, there are some childrens ($elt in this as reference has been updated)
DOM that has been rendered by nuxtjs is mobile DOM so when I deactivate the javascript on browser side, I can see the childrens in the "empty div"
works as expected with no-mobile component (hydrate when trigger-hydration condition is true)

Does someone have an explanation, a trick, any idea ?

Regards

maoberlehner / vue-lazy-hydration

Try to understand the behavior #67