Question: How can I use the carousel with server side rendering?
See original GitHub issuePlease 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.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:19 (2 by maintainers)
Top Results From Across the Web
Building a React Carousel component that rocks with Server ...... I am going to show you how you can create your own Carousel component using React that supports multiple items and server-side...Read more >Server Side Rendering Carousels in Vue.js - HackerNoonThe server renders blank inside client-only. The browser will render the carousel after it evaluates the necessary javascript. Performance ...Read more >React Multiple Items Carousel with Server Side Rendering ...With this article I am going to show you how you can create your own Carousel component using React that supports multiple items...Read more >Owl Carousel 2 server side rendering in ReactjsI used loadable to be able to import the library and it worked fine with SSR. First install loadable: npm install @loadable/component.Read more >SSR for multiple breakpoints using React - DEV Community However, in my case, the server would SSR the carousel for the different theme (breakpoint) and then re-render it on the client-side using...Read more >Top Related Medium Post
No results foundTop Related StackOverflow Question
No results foundTroubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.Start FreeTop Related Reddit Thread
No results foundTop Related Hackernoon Post
No results foundTop Related Tweet
No results foundTop Related Dev.to Post
No results foundTop Related Hashnode Post
No results found
Top GitHub Comments
I solved it by:
// nuxt.config.js
// plugins/carousel.js
Hope it helps!
I initially missed @sainf’s recommendation, but indeed the answer to this thread appears to be the following:
A couple points – I didn’t specify
ssr: false
innuxt.config.js
and that’s because while it’s true thatvue-carousel
should not be used in SSR mode, it actually needs to be wrapped in ano-ssr
component which appears to take a higher precedence.** note that
no-ssr
is bundled into nuxt.js at this point.