vue-lazy-hydration
vue-lazy-hydration copied to clipboard
"never" seems to trigger mounted() nonetheless
I have a very simple component like so:
<LazyHydrate never :trigger-hydration="false">
<FreeShippingPopUp />
</LazyHydrate>
And inside FreeShippingPopUp.vue
I have this:
mounted () {
alert('I am hydrated!');
}
However, the popup appears on the page, which I would expect it wouldn't since it's set to "never". Using version ^2.0.0-beta.2
Can't reproduce.
The following condition is always true. I am using never
in gridsome but client-side rendering is always happening.
if (this.$el.nodeType === Node.COMMENT_NODE)
@noxify and I have tested on the sandbox and it always triggers the mounted
method.
@maoberlehner Any idea whats wrong? We could fix it if you just guide us in the right direction. Thanks
V1: https://codesandbox.io/s/vue-lazy-hydration-example-v1-n99ov V2: https://codesandbox.io/s/vue-lazy-hydration-example-v2-umbgy
@milindsingh vue-lazy-hydration allows you to delay or block the hydration of server-side rendered Vue.js components. In your CodeSandbox example there is no server-side rendering going on. If there is no server-side rendered HTML there also is no hydration. So this package is useless in your examples. If vue-lazy-hydration would block mounting in your example, the component wouldn't render at all. I'm not sure what you expect vue-lazy-hydration to do in a pure client-side context?
@maoberlehner Thanks for clearification. I totally understand your point.
I am facing issue with gridsome, where initially ssr content is display but once the page loading done in browser the ssr content is replaced by the new content rendered by component.
I am facing issue with gridsome
Then show me a minimal reproduction of your problem with Gridsome on CodeSandbox 🤔