Navigation does not work in Nuxt 3

[avpuchkova]

Navigation does not work in Nuxt 3 // package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "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',
          },
      },
    }
     },
})

Next and Prev buttons do not work. What is wrong with my code?

[kissu]

This should help with your issue: https://github.com/ismail9k/vue3-carousel/issues/104

[avpuchkova]

I tried all the tips from here. Now my files look like this: //App.vue

<template>
  <div class="page-container container">
    <Carousel :items-to-show="2" :breakpoints="breakpoints">
            <Slide v-for="slide in 10" :key="slide">
                <div class="carousel__item">{{ slide }}</div>
            </Slide>
            <template #addons>
                <navigation />
            <pagination />
            </template>
    </Carousel>
  </div>
</template>

<script>
export default defineComponent({
    name: 'PageName',
  data() {
        return {
            settings: {
                itemsToShow: 3,
                snapAlign: 'center',
            },
            breakpoints: {
                // 1024 and up
                1024: {
                    itemsToShow: 3,
                    snapAlign: 'start',
                },
                // 1920 and up
                1920: {
                    itemsToShow: 3.25,
                    snapAlign: 'start',
                },
            },
        }
    },
    mounted() {
        setTimeout(() => {
            this.initialSlide = 0
            if (this.$refs.slider) { 
                this.$refs.slider.restartCarousel()     
            }
            slider.value.updateSlideWidth();

        }, 50)
    } 
})
</script>

// nuxt.config.ts

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

//plugins -> vue3-carousel.client.js

import "vue3-carousel/dist/carousel.css";
import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("Carousel", Carousel);
  nuxtApp.vueApp.component("Slide", Slide);
  nuxtApp.vueApp.component("Pagination", Pagination);
  nuxtApp.vueApp.component("Navigation", Navigation);
});

Carousel is rendered. But breakpoints, Navigation and Pagination do not work. If i wrap Carousel with <ClientOnly> ... </ClientOnly> - it is not rendered at all

[luc122c]

@avpuchkova You should not need plugins/vue3-carousel.client.js, that's what the module is doing for you.

[avpuchkova]

Resolved

[shadman-ahmed-bs23]

Resolved

@avpuchkova , how did you solve the issue? In my case the carousel button is not showing.

[avpuchkova]

@shadman-ahmed-bs23 I had bootstrap import issue. It blocked carousel render.