Open furyscript opened 6 years ago
Hmm, I'm not 100% familiar with nuxt. There are many cases of multi-carousel working over SSR though, so there's a way this will work! I'll flag this and see if someone can offer some help
I'm not having this problem with Nuxt. I'm loading the carousel with nuxt.config:
plugins: [ { src: '~/plugins/vue-carousel.js', ssr: false } ],
In vue-carousel.js:
import Vue from 'vue';
import { Carousel, Slide } from 'vue-carousel'
Vue.component('carousel', Carousel);
Vue.component('slide', Slide);
and on my page I just use
Hope that helps
I've got the same problem when using multiple carousels. In my case this seems to be caused by using the perPageCustom
prop. In the computed function breakpointSlidesPerPage
this prop is mutated due to being sorted in place, triggering a recompute in the second carousel and starting an infinite loop.
I've got the same problem with Nuxt and 2 carousels in one page...
I'm not having this problem with Nuxt. I'm loading the carousel with nuxt.config:
plugins: [ { src: '~/plugins/vue-carousel.js', ssr: false } ],
In vue-carousel.js:
import Vue from 'vue'; import { Carousel, Slide } from 'vue-carousel' Vue.component('carousel', Carousel); Vue.component('slide', Slide);
and on my page I just use , without declaring in Components or anything.
Hope that helps
Works a treat!
Nuxt: 2.0.0 vue-carousel: 0.15.0
I'm not having this problem with Nuxt. I'm loading the carousel with nuxt.config:
plugins: [ { src: '~/plugins/vue-carousel.js', ssr: false } ],
In vue-carousel.js:import Vue from 'vue'; import { Carousel, Slide } from 'vue-carousel' Vue.component('carousel', Carousel); Vue.component('slide', Slide);
and on my page I just use , without declaring in Components or anything. Hope that helps
Works a treat!
Nuxt: 2.0.0 vue-carousel: 0.15.0
Weird. Also "nuxt": "^2.0.0" and "vue-carousel": "^0.15.0". Added vue-carousel.js at plugins and nuxt config but still having window is not defined error.
My bad, solution above add in nuxt config and adding as plugin actually works. I just forgot to remove import at the vue file that uses the carousel.
@ynte I'm having the same issue, please did you find a way to fix it?
@Yezuz05 I created two separate data members (with the same contents) for my two carousels. You cannot pass the same object to multiple perPageCustom
props.
Caroussel 1:
<carousel :paginationEnabled="false" :navigationEnabled="true" :perPageCustom="breakpoints" ...
Caroussel 2:
<carousel :paginationEnabled="false" :navigationEnabled="true" :perPageCustom="breakpoints2" ...
@ynte Thanks. :smile:
@ynte Thanks, save my time.
I have a problem with nuxt:
If I use two carousel into one page, I get this error
you may have an infinite update loop in a component render function
And the first carousel doesn't have correct width/heightThe template is like:
And plugin: