SSR Support

[samuelgoddard]

Hi mate, really appreciate this port, it's working great on my Vue projects. However, I'm attempting to use this library in a Nuxt project and and stumbling with SSR support. I've noticed this is on your roadmap, do you have any idea when this might get implemented / any guidance to how to approach getting it working so I can potentially look at opening a PR?

Thanks again

[magisters-cc]

@samuelgoddard hi! for ssr i want to use smooth scrollbar as directive (for example, like vue-quill-editor https://github.com/surmon-china/vue-quill-editor/blob/master/src/ssr.js). In nuxt i used it with <no-ssr> at this moment. Hope this helps 😊

[DidoMarchet]

Hi,
sorry but if you use no-ssr it doesn't render (dynamic) content inside the vue-smooth-scrollbar component.
That's mean the app it's not rendered and it remain a spa 😐
Thanks to the support and have a nice day!

[magisters-cc]

@DidoMarchet I used it with mixin, that checks spa or ssr mode, and for ssr i render markup without scrollbar, and when spa app mounted, i replace static content with content with scrollbar. This methods works for me, but it still not clean solution 🤔

[scaccogatto]

Hello there,
I think the general approach is not the ideal one, directives should be used for DOM manipulation.
So, after some thinking, I went for a pure directive implementation: https://github.com/scaccogatto/smooth-vuebar

This guy supports SSR out of the box and it runs smoothly.
Tell me what you think, maybe we can build something better together.

[shiliaev]

Just use ` { mode: client } `

[Funnyang]

for render (dynamic) content, It maybe should like this:

<template>
  <div ref="scrollArea" class="smooth-scrollbar">
     <div>
       <slot/>
    </div>
  </div>
</template>

for me, it works