Why carousel does not work on vue3 and nuxt3?

Navigation does not work in Nuxt 3.

I use nuxt3, vue3, node 20.10.0 and vue3-carousel-nuxt. It is looks like my config is wrong, but I cannot figure out why

package.json:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    ...
  },
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "bootstrap": "^5.3.2",
    "node-sass": "^9.0.0",
    "nuxt": "^3.8.2",
    "sass": "~1.64.2",
    "sass-loader": "^13.3.2",
    "vite-svg-loader": "^5.1.0",
    "vue": "^3.3.10",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap-vue": "^2.23.1",
    "core-js": "^3.34.0",
    "i": "^0.3.7",
    "npm": "^10.2.5",
    "vue3-carousel": "^0.3.1",
    "vue3-carousel-nuxt": "^1.1.0"
  }
}

nuxt.config.ts:

export default defineNuxtConfig({
devtools: { enabled: true },
...,
modules: [
    'vue3-carousel-nuxt'
  ]
})

App.vue:

<template>
  <div class="page-container container">
    <Carousel v-bind="settings" :breakpoints="breakpoints">
            <Slide v-for="slide in 10" :key="slide">
                <div class="carousel__item">{{ slide }}</div>
            </Slide>
            <template #addons>
                <Navigation />
            </template>
    </Carousel>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
import { Carousel, Navigation, Slide } from 'vue3-carousel';
import 'vue3-carousel/dist/carousel.css';

export default defineComponent({
  name: 'PageName',
  components: {
      Carousel,
      Slide,
      Navigation,
    },
  data() {
    return {
      settings: {
            itemsToShow: 1,
            snapAlign: 'center',
        },
      breakpoints: {
          // 700px and up
          700: {
                  itemsToShow: 3.5,
                  snapAlign: 'center',
          },
          // 1024 and up
          1024: {
            itemsToShow: 5,
            snapAlign: 'start',
          },
      },
    }
     },
})

When I click Next and Prev buttons they do not work.

I tried to write nuxt.config.ts like this:

 module: {
     modules: ['vue3-carousel-nuxt'],
 }

or

 module: {
     modules: 'vue3-carousel-nuxt',
 }

It did not help.

What is wrong with my code?

  • I answered you in the Github issue. The module is not working well when you mix-in breakpoints and SSR. In the given link, people provide some code examples as of how to achieve the desired behavior.

    – 

Leave a Comment