Question: How can I use the carousel with server side rendering?

Please suggest how to use with Vue SSR. I am trying to integrate this with VueJS’s framework Nuxt.js

import Vue from 'vue'
if(process.BROWSER_BUILD) {
    const VueCarousel = require('vue-carousel');
    VueCarousel.default.install(Vue)
}

I am getting this

vue.runtime.common.js:521 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render.

Although I am able to make it work in dev mode, regardless of the warning. On production mode vue-carousel doesn’t work and doesn’t show images at all.

Please suggest.

[dieguezz]

I solved it by:

// nuxt.config.js

plugins: [{ src: '~/plugins/carousel', ssr: false }],

// plugins/carousel.js

import Vue from 'vue'
import { Carousel, Slide } from 'vue-carousel'

Vue.component('carousel', Carousel)
Vue.component('slide', Slide)

Hope it helps!

[dfee]

I initially missed @sainf’s recommendation, but indeed the answer to this thread appears to be the following:

// plugins/vue-carousel.js
import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);

// nuxt.config.js
{
...
  plugins: [ '~/plugins/vue-carousel' ],
...
}

// e.g. pages/index.vue
<template>
<no-ssr>
  <carousel>
    <slide v-for='i in 10' :key='i'>Slide {{ i }}</slide>
  </carousel>
</no-ssr>
</template>

A couple points – I didn’t specify ssr: false in nuxt.config.js and that’s because while it’s true that vue-carousel should not be used in SSR mode, it actually needs to be wrapped in a no-ssr component which appears to take a higher precedence.

** note that no-ssr is bundled into nuxt.js at this point.