Vue-carousel: Question: How can I render two carousel on one page with nuxt?

[furyscript]

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/height

The template is like:

<div>
    <no-ssr>
        <carousel>
            <slide>
                ...
            </slide
            <slide>
                ...
            </slide
        </carousel>
    </no-ssr>
    ...
    ...

    <no-ssr>
        <carousel>
            <slide>
                ...
            </slide
            <slide>
                ...
            </slide
        </carousel>
    </no-ssr>
</div>

And plugin:

import Vue from 'vue'

import VueCarousel from 'vue-carousel'

Vue.use(VueCarousel)

[quinnlangille]

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

[jorgvm]

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

[ynte]

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.

[aZilberstein]

I've got the same problem with Nuxt and 2 carousels in one page...

[BillyPurvis]

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

[ianemv]

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.

[ianemv]

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.

[Yezuz05]

@ynte I'm having the same issue, please did you find a way to fix it?

[ynte]

@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"  ...

[Yezuz05]

@ynte Thanks. :smile: