How to use Swiper.js(version 8 ) in Nuxt(2.15.8)-CodePudding

First I tried this as showed in official Swiper.js website for Vue 3 demo

<template>
  <swiper
    :effect="'coverflow'"
    :grabCursor="true"
    :centeredSlides="true"
    :slidesPerView="'auto'"
    :coverflowEffect="{
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    }"
    :pagination="true"
    :modules="modules"
    
  >
    <swiper-slide v-for="card in cards"
      ><img
        :src="card.image" /></swiper-slide>
  </swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/effect-coverflow";
import "swiper/css/pagination";

import "./style.css";

// import required modules
import { EffectCoverflow, Pagination } from "swiper";

export default {
  props: ['cards']
  setup() {
    return {
      modules: [EffectCoverflow, Pagination],
    };
  },
};
</script>

And it did not work.

Then I tried to import it as a plugin in plugins folder of nuxt:

import Vue from 'vue';
import { Swiper, EffectCoverflow, Pagination } from "swiper";
const swiper = {
    install(Vue, options) {
        Vue.prototype.$swiper = Swiper;
        Vue.prototype.$swiperModules = {
            EffectCoverflow,
            Pagination,
        };
    }
};

Vue.use(swiper);

And registred it in nuxt.js.config as: src: './plugins/swiper.client.js', mode: 'client'

And tried to use it in my component like this:

<template>
      <Swiper>
        <SwiperSlide v-for="card in cards" :key="card.id">
          <NuxtLink :to="`products/${card.id}`" >
            <img
              :src="require(card.image)"
              alt="image"
              
            />
            <h3 >{{ card.title }}</h3>
            <p >{{ card.snippet }}</p>
          </NuxtLink>
        </SwiperSlide>
      </Swiper>
</template>

<script>
export default {
  props: ['cards'],
  mounted() {
    this.swiper = new this.$swiper('.swiper', {
      loop: true,
      // configure Swiper to use modules
      modules: [
        this.$swiperModules.Pagination,
        this.$swiperModules.EffectCoverflow,
      ],
    })
  },
}
</script>

And it is still not working, What am I doing wrong? Can anyone help with it?

CodePudding user response：

TLDR: Nuxt2 and Swiper8 are not compatible.

Swiper v8.0.0 is almost 1 year old: https://github.com/nolimits4web/swiper/releases/tag/v8.0.0

2 years ago, nolimits4web aka the main maintainer of the package said

Swiper Vue.js components are compatible only with new Vue.js version 3

Easy to say that the v8 of Swiper is definitely not compatible with Nuxt2 (using Vue2).
Even if there was a hack, it would be quite dirty and not the thing that I would recommend overall.

[email protected] is also 38.7kB gzipped, which is quite on the heavy side of things.
If you're using all of its features and ready to upgrade to Nuxt3 (which might not be trivial), then you could maybe proceed.

Otherwise, you could maybe design your own carousel component or check the ones available here: https://github.com/vuejs/awesome-vue#carousel
I'm guessing that there are some projects with Nuxt2 support still, not too heavy and still maintained that could satisfy your needs.