search

maoberlehner / vue-lazy-hydration

Lazy Hydration of Server-Side Rendered Vue.js Components
MIT License
1.18k stars 52 forks source link

Classes/Attrs not proxied upon client side mount #34

Closed brophdawg11 closed 3 years ago

brophdawg11 commented 4 years ago

When an element is mounted client side, if it is not yet hydrated, this only renders a div, but when the Lazyhydrate element has a class applied to it, it will blow away any internal classes from the root slot element.

You can work around this at the moment by just never including classes or attributes on the LazyHydrate component, but that's a bit fragile since developers are quite used to classes/attrs being proxied through to the root child element I think (at least in our case this bit us fairly easily).

I created a small reproduction in https://github.com/brophdawg11/vue-ssr-lazy-hydration-classname-bug to show off the issue, and I have a proposed fix I will open in a PR shortly.

Thanks for the great work on this component! It has helped our performance metrics a ton in our project 👍

maoberlehner commented 4 years ago

Thanks for your contribution. I'm really happy to hear that it helps improving the performance metrics of your project. Looking forward to the PR.

invisor commented 3 years ago

I running into the same issue. Any fixes or workarounds?

maoberlehner commented 3 years ago

I running into the same issue. Any fixes or workarounds?

Don't add classes on <LazyHydrate> iself. <LazyHydrate> does not render anything so adding classes does not make sense.

<LazyHydrate>
  <div class="classes belong here"><!-- ... --></div>
</LazyHydrate>