Does not work with NuxtJS SSR

[carcinocron]

I'm not saying NuxtJS should literally be able to render SSR for this component, just that it shouldn't crash when looking for browser specific globals when wrapped in <no-ssr></no-ssr> tags.

[viktorlarsson]

I haven't even seen NuxtJS, could you investigate what I need to do or perhaps do a pull request?

[nafSadh]

I have been having trouble using it with NuxtJS. I'm not even trying to do SSR, just client side. But, never made it work! @InstanceOfMichael can you share some insight?

[carcinocron]

@nafSadh it's been a long time, can you share your specific error message?

[nafSadh]

@InstanceOfMichael it ranged from tns unresolved do window error in various setup. In the end, I copied the entire within a no-ssr plugin, like this: https://github.com/nafSadh/nafSadh.com/commit/d1f1a837b83c590aca02046f9eea793b3002663f#diff-449e2e24933a1e98fd1b7ae58f48fb08

Still had trouble when tried to mix it with nuxt generate, the slider becomes static to (so no sliding, no animation etc.). This happened because, the nuxt generate created multiple entries for each image. However, this works fine as client rendered SPA.

Eventually, now, I am just using this hack: https://github.com/nafSadh/nafSadh.com/commit/a1f58363aa3dfe6a8e740fb553b29923b0e2f30d

My final impression is that, I'd adopt pure Vue instead of nuxt.

[viktorlarsson]

Closing this due to inactivity.

[ilbonte]

After a few hours I managed to get it working:

Steps

1. yarn add vue-tiny-slider
2. in nuxt.config.js add

   plugins: [{ src: '~/plugins/vue-tiny-slider.js', ssr: false }],
   build: { vendor: ['vue-tiny-slider']}

3. create the file plugins/vue-tiny-slider.js with this content

   
   import Vue from 'vue'
   import vTinySlider from 'vue-tiny-slider'
   const VueTinySlider = {
   install(Vue, options) {
   Vue.component('vue-tiny-slider', vTinySlider)
   }
   }
   Vue.use(VueTinySlider)
   export default VueTinySlider

Now you should be able to use it in any component **without** any import, like this:
```js
<vue-tiny-slide v-bind="tinySliderOptions">
      <div>#1</div>
      <div>#2</div>
      <div>#3</div>
      <div>#4</div>
      <div>#5</div>
      <div>#6</div>
    </vue-tiny-slide>

I've setted up a demo: https://codesandbox.io/s/jvjp349449

If you find an easier way of doing this, let me know!

@viktorlarsson I think that you should add a guide to the Readme. A lot of people are using nuxt with ssr

[viktorlarsson]

Thanks! Ill get it into the readme!

[aldarund]

build: { vendor: ['vue-tiny-slider']}

Thats outdated setting and not used in nuxt 2.x +

[viktorlarsson]

@aldarund, is there an alternative?

[aldarund]

@viktorlarsson https://github.com/viktorlarsson/vue-tiny-slider/pull/36 Basically its done automatically by nuxt and this option just do nothing

[ilbonte]

Yes, @aldarund is right. Tried removing it and worked

---

I've noticed that to work with the local dev server the tag <no-ssr> is required. I'm creating a PR right now to update the Readme. I've also updated the example

[ilbonte]

Fixed here: https://github.com/viktorlarsson/vue-tiny-slider/pull/37

[Abolfazl2049]

dude if you having trouble using this come and use this slider (i'm using it) https://nuxt.com/modules/vue3-carousel-nuxt