How to use "v-owl-carousel" with nuxt and vuetify?

Question

I am working on a Nuxt app and using "Vuetify" as my frontend framework. In one of my pages I decided to use "v-owl-carousel" for making a carousel. The code of that page is below:

<template>
<v-container>
<v-row>
    <v-col cols="12">
    <client-only> <!-- important to add no-ssr-->
    
    <carousel :autoplay="true" :number="6">
        <v-card>
            <img :src="require(`~/assets/imgs/books/07.webp`)">
        </v-card>

        <v-card>
            <img :src="require(`~/assets/imgs/books/02.webp`)">
        </v-card>

        <v-card>
            <img :src="require(`~/assets/imgs/books/03.webp`)">
        </v-card>

        <v-card>
            <img :src="require(`~/assets/imgs/books/04.webp`)">
        </v-card>

        <v-card>
            <img :src="require(`~/assets/imgs/books/05.webp`)">
        </v-card>

        <v-card>
            <img :src="require(`~/assets/imgs/books/06.webp`)">
        </v-card>
    </carousel>
    
    </client-only>
    </v-col>
</v-row>
</v-container>
</template>

The problem here is that only 3 image of all images are shown in the carousel and when the carousel loops it shows nothing until it comes back to that 3 image. I find out that if I comment the "v-app" in my default.vue layout like below code, it works correctly:

<template>
<!--
<v-app dark lang="fa" dir="rtl">
  <the-nanigation />
  <v-main>
-->
    <div id="mainContent">
      <nuxt />
    </div>
<!--
  </v-main>
</v-app>
-->

</template>

But according to Vuetify documentation we must use v-app in our applications. So what is the solution to use v-owl-carousel in my app that uses Vuetify.

I do not recommend using `owl-carousel`as of today: https://stackoverflow.com/a/68578130/8816585 Best idea would be to go with something more modern and share us a Github repo with your tries. — kissu, Aug 22 '21 at 11:49
@kissu I read the link you put in your comment. I wanted to use swipper.js but in its documentation it says that it is compatible with Vue3. I also tried "VueSlickCarousel". But again the same problem with **v-app** exists. Did you yourself test any carousel package with nuxt that supports **multiple slides** and does not have any problem with **Vuetify**? — hamid-davodi, Aug 22 '21 at 14:40
Compatibility with Vue3 not always mean, Vue3 **only**. Since I suggested it in my answer, it is because it works perfectly fine with Nuxt (Vue2). I also do use it personally with Buefy and Tailwind and basically, having both is not really an issue since those 2 are doing 2 totally different things. Can you try to make us a Github repo with those 2 (Vuetify and the awesome-slider one)? — kissu, Aug 22 '21 at 14:56
@kissu I tried to work with your answer, but I could not use Yarn, maybe my internet or system have some problem, but thanks for your help. I finally solved my problem with [Vuetify slide-group](https://vuetifyjs.com/en/components/slide-groups/). — hamid-davodi, Aug 31 '21 at 04:17
If you cannot use `yarn`, use `npm`. Mind upvoting my answer for the time spent and effort done please? — kissu, Aug 31 '21 at 09:40
@kissu, Although I could not try your answer, but for your time and effort I upvoted it. — hamid-davodi, Aug 31 '21 at 11:40

score 1 · Answer 1 · answered Aug 23 '21 at 13:28

Alright, I did it for you here on this github repo: https://github.com/kissu/so-vuetify-awesome-swiper

It is mainly this
nuxt.config.js file

import colors from 'vuetify/es5/util/colors'

export default {
  ssr: false,
  target: 'static',
  head: {
    titleTemplate: '%s - so-vuetify-awesome-swiper',
    title: 'so-vuetify-awesome-swiper',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  components: true,

  buildModules: ['@nuxtjs/eslint-module', '@nuxtjs/vuetify'],

  modules: ['@nuxtjs/axios'],

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },
}

This package.json

{
  "name": "so-vuetify-awesome-swiper",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "core-js": "^3.15.1",
    "nuxt": "^2.15.7",
    "swiper": "^6.8.4",
    "vue-awesome-swiper": "^4.1.1",
    "vuetify": "^2.5.5"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/vuetify": "^1.12.1",
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^7.12.1",
    "prettier": "^2.3.2"
  }
}

And here is the .vue component that I've created

<template>
  <div>
    <p>Amazin swiper huh? </p>
    <swiper :options="swiperOptions" class="swiper">
      <swiper-slide v-for="image in gallery" :key="image.id">
        <img :src="image.src" />
      </swiper-slide>

      <div
        v-show="prevSlideAvailable"
        slot="button-prev"
        @click="$refs.swiper.$swiper.slidePrev()"
      ></div>
      <div
        v-show="nextSlideAvailable"
        slot="button-next"
        @click="$refs.swiper.$swiper.slideNext()"
      ></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

export default {
  name: 'AwesomeSwiper',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      gallery: [
        { id: 1, src: 'https://source.unsplash.com/random/500x500?sig=1' },
        { id: 2, src: 'https://source.unsplash.com/random/500x500?sig=2' },
        { id: 3, src: 'https://source.unsplash.com/random/500x500?sig=3' },
      ],
      swiperOptions: {
        slidesPerView: 1,
        spaceBetween: 30,
        lazy: false,
        effect: 'fade',
        pagination: {
          el: '.swiper-pagination',
          type: 'progressbar',
        },
        navigation: {
          disabledClass: '.nice-meme',
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
    }
  },
}
</script>

<style scoped>
.swiper {
  width: 500px;
  margin: 0 auto;
}
</style>

The result looks great so far

How to use "v-owl-carousel" with nuxt and vuetify?

1 Answers1