Closed carcinocron closed 5 years ago
I haven't even seen NuxtJS, could you investigate what I need to do or perhaps do a pull request?
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?
@nafSadh it's been a long time, can you share your specific error message?
@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.
Closing this due to inactivity.
Steps
yarn add vue-tiny-slider
nuxt.config.js
add
plugins: [{ src: '~/plugins/vue-tiny-slider.js', ssr: false }],
build: { vendor: ['vue-tiny-slider']}
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
Thanks! Ill get it into the readme!
build: { vendor: ['vue-tiny-slider']}
Thats outdated setting and not used in nuxt 2.x +
@aldarund, is there an alternative?
@viktorlarsson https://github.com/viktorlarsson/vue-tiny-slider/pull/36 Basically its done automatically by nuxt and this option just do nothing
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
dude if you having trouble using this come and use this slider (i'm using it) https://nuxt.com/modules/vue3-carousel-nuxt
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.