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

[rohitcelestial]

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.

[toddlawton]

Hi @rohitpal99

I haven't worked with Nuxt.js before, I currently use this carousel in a SSR environment very similar to this one without any issues. Looking for help from anybody who can investigate with Nuxt.

[gabrielmancini]

+1

[royscheeren]

I'm having the exact same issue. Using

if (process.browser) {
  const VueCarousel = require('vue-carousel')
  VueCarousel.default.install(Vue)
}

to make the carousel globally available but indeed receiving the same warning when actually using it.

[DiederikvandenB]

I am using this plugin with Vue and Nuxt too. @royscheeren, I am implementing it as a plugin with {src: '~plugins/vue-carousel.js', ssr: false}, in the nuxt.config.js file and with

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);

However, I indeed receive the same error.

[DiederikvandenB]

Is there anyone working on this issue? I would love to solve it myself but I do not really know where to start.

[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!

[hackuun]

@dieguezz you will still have error in console, what are you talking about?

[dieguezz]

@iamdubx That just worked for me, without messages in console. Maybe your problem is in another place, or i got something different which i forgot to mention (Like nuxt.js version or something but i dont think so). Anyway i am not using this plugin anymore, i made my own component because its a really simple feature.

Sorry if that does not help much..

[andreasvirkus]

@toddlawton I'm also working with Vue's native SSR (similarly to you, based also off of HN2.0 example) and am wondering how you managed to import it conditionally? Currently if setting up as the guide/examples show us to, I run into the following errors (server-side):

 ReferenceError: document is not defined
    at r (project/node_modules/vue-carousel/dist/vue-carousel.min.js:6:2155)
    at a (project/node_modules/vue-carousel/dist/vue-carousel.min.js:6:1986)
    at e.exports (project/node_modules/vue-carousel/dist/vue-carousel.min.js:6:3392)
    at Object.<anonymous> (project/node_modules/vue-carousel/dist/vue-carousel.min.js:6:947)
    at t (project/node_modules/vue-carousel/dist/vue-carousel.min.js:6:332)
    at VueComponent.a (project/node_modules/vue-carousel/dist/vue-carousel.min.js:6:786)
    at callHook (project/node_modules/vue/dist/vue.runtime.common.js:2663:21)
    at VueComponent.Vue._init (project/vue/dist/vue.runtime.common.js:4220:5)
    at new VueComponent (project/node_modules/vue/dist/vue.runtime.common.js:4394:12)
    at createComponentInstanceForVnode (project/node_modules/vue-server-renderer/build.js:6817:10)

[hackuun]

@dieguezz I am pretty sure you are not telling the whole picture. It has nothing with Nuxt version. To get rid of warning you need to load plugin on mounted. You will have warning 100% in other case.

[sainf]

Hi.

Just tested with nuxt as it still gives errors, and it should give.. because it uses Browser only function like ( document and window )

To load the plugin in "mounted" is to bypass the server render, see: https://nuxtjs.org/guide/plugins

An easy solution is to use "no-ssr": https://github.com/egoist/vue-no-ssr and load the plugin as nuxt docs.

Of course all this solutions are not for server rendering, so seo will be hurt.

It would be nice to see this great plugin to work in full SSR.

[james2doyle]

I think the issue is that this.$isServer is undefined during render in nuxt. Because the guard is !this.$isServer, the code in those blocks continues to run. I think an option would be to use typeof(this.$isServer) !== 'undefined' && this.$isServer === true.

I think the best option is to set isServer _as a prop_ with the default set to false. Then the user can decide what conditions they want to treat as "isServer".

[lanbau]

hi i am also experiencing the same error as mentioned above.

[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.

[natemate90]

I added plugins: [{src: '~/plugins/vue-carousel.js', ssr: false}], in nuxt.config.js to force nuxt not to use ssr on this component, no need to use <no-ssr>

[amjadkhan896]

I am having the same issue. Not working in SSR "npm run build" command..
Anybody is facing the issue

[quinnlangille]

Hey @amjadkhan896, there are lots of potential solutions for SSR posted above ^. So many, that it actually warrants closing this issue. I'll flag it as a question for searchability, but this issue is definitely resolved :octocat:

[syamkumarkk]

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!

Its the solution for Nuxt.js ....