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

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.

Answer 1

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