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.