Proposal: Officially Acknowledge Nuxt.js 3 Module for Vue 3 Carousel

[gaetansenn]

Is your feature request related to a problem? Please describe. The feature request isn't directly related to a problem, but rather an improvement to make Vue 3 Carousel more accessible and easy to integrate for Nuxt.js 3 developers.

Describe the solution you'd like I've developed a Nuxt.js 3 module for Vue 3 Carousel that makes it easy for developers to add and configure the carousel in their Nuxt.js applications. I propose we officially acknowledge this module in the Vue 3 Carousel documentation so that Nuxt.js users can find it more easily and utilize it in their projects.

Describe alternatives you've considered An alternative to this is having the users manually set up Vue 3 Carousel in their Nuxt.js applications, but this module simplifies the process and ensures a streamlined integration.

Additional context The Vue 3 Carousel Nuxt.js module automatically sets up the necessary components, allows prefixing of component names for customization, and adds the Carousel CSS file to the project.

The module is available on NPM and can be found at this repository.

By acknowledging this in the Vue 3 Carousel documentation, we can potentially increase the usage and overall accessibility of Vue 3 Carousel among the Nuxt.js developer community.

[ismail9k]

Hey @gaetansenn thanks for your help! Sure I will include your module in the docs

[MarineLB]

@gaetansenn Hey! Does this module make vue3-carousel work with SSR ? :)

[gaetansenn]

Hey @MarineLB, my module is just auto-importing the components and the default css. As this module is only using the window inside the mounted function, it should work in SSR mode.

The only thing I can foresee is that there may be some difference between the CSS applied on SSR before and after the mounting process, as some updates are made afterwards, like updateSlideWidth().

I think @ismail9k will be better equipped to answer these questions :)

[ismail9k]

As @gaetansenn mentioned this module should not have an impact on the SSR. The carousel itself uses some client-only functions such as getBoundingClientRect and window.matchMedia, but they get evoked only during the onMounted hook, which is called on the client only. Yet it has been reported some issue for SSR you can refer to this issue #104

[MarineLB]

It seems that in the issue #104 most people seems to suggest wrapping the whole carousel in a wrapper, or declaring it as a ClientOnly plugin. Since we need the content inside the carousel to be indexed we can not use that. But for now we will go with the Swiper.js Vue Component.

Thank you for the answers @gaetansenn @ismail9k !

[signor-pedro]

@MarineLB It seems that the library is SSR-friendly unless you start specifying breakpoints.

Since everyone is using VueUse anyway, one "workaround" is to dynamically calculate props based on the SSR-friendly VueUse composables such as useBreakpoints, useWindowSize etc.

Example from our Nuxt3 app:

<template>
<Vue3Carousel
  ref="carouselTestimonials"
  :items-to-show="dynamicItemsToShow"
  :snap-align="width >= 768 ? 'center' : 'left'"
>
</template>

<script setup>
const carouselTestimonials = ref();

// This is SSR-friendly.
const { width } = useElementSize(carouselTestimonials);

const dynamicItemsToShow = computed(() => {
  const itemsToShow = width.value / 980;
  if (itemsToShow && width.value < 768) return 1.2;
  if (itemsToShow && width.value >= 1280) return itemsToShow;
  return 1.6;
});

or a modified example to use breakpoints

<script setup>
const carouselTestimonials = ref();
const breakpoints = useBreakpoints(breakpointsTailwind); // see https://vueuse.org/core/useBreakpoints/

const dynamicItemsToShow = computed(() => {
  const itemsToShow = width.value / 980;
  if (breakpoints.smaller("md").value) {
    return 1.2;
  }
  if (itemsToShow && breakpoints.greaterOrEqual("xl").value) {
    return itemsToShow;
  }
  return 1.6;
});
</script>

I put the word workaround into quotation marks because, now that I think of it, it's not even a workaround. A random carousel component should probably not deal with my breakpoints (which I now have to redeclare as a prop...).

You should probably handle these calculations elsewhere anyway :)