DEV Community

Cover image for Vue.js Carousels: SSR Support And Performance

Vue.js Carousels: SSR Support And Performance

KyuWoo Choi on January 20, 2020

Web Performance Optimization I am one of the CoE members in GSShop. Our company invests startups, and I help them to grow. Last time, I ...
Read full post
Collapse
 
dreaminder profile image
DreaMinder •

Hooper would win here, especially after testing bundle size.

Collapse
 
farzadso profile image
Farzad Soltani •

Hooper FTW!

Collapse
 
runxc1 profile image
runxc1(Bret Ferrier) •

Isn't Hooper only Vue2 with no plans to upgrade to Vue3?

Collapse
 
dreaminder profile image
DreaMinder •

Yes but no. The main contributor is already building something simillar to hooper for Vue3 - github.com/ismail9k/vue3-carousel

Collapse
 
sintj_ profile image
Stefano • • Edited

I don't know why, but i can't manage to make it work. The slide is vertical and the slides are one on top of the others! I made a blank project to test it and is still broken:

<template>
  <div>
      <VueSlickCarousel v-bind="carouselSettings">
        <div><h1>Test1</h1></div>
        <div><h1>Test2</h1></div>
        <div><h1>Test3</h1></div>
      </VueSlickCarousel>
  </div>
</template>

<script>

  import VueSlickCarousel from 'vue-slick-carousel'
  import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'


export default {
  components: {
      VueSlickCarousel
  },
  data(){
    return{
      carouselSettings:{
        "dots": true,
        "focusOnSelect": true,
        "infinite": true,
        "speed": 500,
        "slidesToShow": 3,
        "slidesToScroll": 3,
        "touchThreshold": 5
      }
    }
  }
}

<style scoped>
h1{
   background-color:red
}

Screenshot:
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
kyuwoochoi profile image
KyuWoo Choi gsshop •

Please submit the issue to the GitHub please.

Collapse
 
evansgary profile image
EvansGary •

Same issue here

Collapse
 
boianivanov profile image
Boian Ivanov •

Really liked the detailed article on what's the best way to implement an SSR carousel in Vue. Although since I've been through those hoops already, I would recommend a more Vue + CSS approach. Buefy has a really easy-to-use component for carousels that was added quite recently that you could potentially check out. But that's if you are going to use Bulma as your CSS framework of choice. Otherwise the article is quite on point. Good job !

Collapse
 
kyuwoochoi profile image
KyuWoo Choi gsshop • • Edited

You're right. It's better not to use 3rd party libraries at all as it's overhead. If the carousels provided by the UI frameworks work for you, that's it. But the carousels listed above offer rich features. And only in such cases you should take the carousels above. Because It's smarter to use rather than try to implement that.

Collapse
 
stackedboost profile image
Peter Hallander •

Great breakdown of carousel performance with SSR — the hydration issues with carousels are a real pain point and it's good to see them addressed head-on.

Carousels are especially common in ecommerce, particularly on Shopify. If anyone's working on a Shopify store with Vue (via Hydrogen or a custom storefront), a couple of apps worth knowing about:

Eye Catching (apps.shopify.com/beautiful-brands) — standardizes product images used inside those carousels: consistent backgrounds, overlays, and badges. Helps catalog carousels look polished without needing to pre-process every image manually.

Prefetch (apps.shopify.com/prefetch) — preloads product/collection pages on hover, so clicking through from a carousel feels instant rather than triggering a full page load.

These complement the SSR performance work you're describing nicely. Nice article!

Collapse
 
babakkarimiasl profile image
Babak Karimi Asl •

you saved me big time thank you . i used your vue-slick-carousel , which works smoothly on mobile too.