vue-lazy-hydration

vue-lazy-hydration copied to clipboard

In this case:

<LazyHydrate when-visible>
  <b-container>

    ......
  
    <client-only>
      <TheVisitedTours v-show=toursRecentlyViewed.length" />
    </client-only>
  </b-container>
</LazyHydrate>

<client-only> does not work.

Some details.

Pleas provide a minimal reproduction when you're still interested in a fix.

I think he about hydration error if use client-only and lazy-hydration Reproduce It may be usefull, for create component only for client and only when-idle or when-visible

For us this is happening consistently but not in all places where we use <LazyHydrate>. Somewhere <client-only> within <LazyHydrate> works, somewhere not.

But in the end it's a ['<!-- -->'] vs [] conflict.

The workaround is to create your own <ClientOnly> that consistently renders a span as opposed to a comment vs. nothing.

const ClientOnlyFixed = defineComponent({
  setup(props, { slots }) {
    const render = ref(false);
    onMounted(() => (render.value = true));
    return () => render.value ? h('span', {}, slots.default()) : h('span');
  },
});

@MartinMalinda @maoberlehner I'm experiencing a similar problem as above from Martin, where using v-if or v-for results in this line this.$el.nodeType === Node.COMMENT_NODE getting triggered, overwriting the never parameter.

<LazyHydrate never>
   <div v-if="couldBeTrueOrFalseDoesntMatter" @click="doSomething">Click Me</div>
</LazyHydrate>

<LazyHydrate v-for="a in array" :key="a" never>
   <div>{{ a }}</div>
</LazyHydrate>

Edit: I think I've fixed it. The problem was with async components (() => import) and using mounted hook for API requests, because the mounted hook within lazy-hydration was called before it finished the api call. Using classic import and fetch hook resulted in this.$el being the actual object, not just an empty comment (at least for v-for) https://github.com/nuxt/nuxt.js/issues/8981