CODEWITHSUNDEEP
vue-componentvuejs3swiper.js
Andy
Andy

Reputation: 2140

Vue3 and Swiper component - using Pagination in composition API

I want to use the Swiper component - https://swiperjs.com/vue#usage using Composition API on Vue^3.2.31

I can get the basic swiper working, but I cannot get Pagination (or any other module) to work.

<template>
    <swiper :slides-per-view="1" :pagination="true">
        <swiper-slide>Foo</swiper-slide>
        <swiper-slide>Bar</swiper-slide>
    </swiper>
</template>

<script setup lang="ts">
  import { Swiper, SwiperSlide } from "swiper/vue";
  import "swiper/css/pagination";
  import "swiper/css";
</script>

The examples on the page focus on Options API. I'm not familiar enough with translating from Options to Composition to be able to follow the documentation on how to get Pagination working.

I tried import { Pagination } from "swiper"; but I don't know how to get the "swiper/vue" to use it.

The documentation says "By default Swiper Vue.js uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and other modules, you have to install them first."

How do I install and use them in Composition API?

Upvotes: 1

Views: 5283

Answers (1)

Duannx
Duannx

Reputation: 8726

To install additional modules, you just need to pass them as the props of swiper

<template>
    <swiper :modules="modules" :slides-per-view="1" :pagination="true">
        <swiper-slide>Foo</swiper-slide>
        <swiper-slide>Bar</swiper-slide>
    </swiper>
</template>

<script setup lang="ts">
  import { Swiper, SwiperSlide } from "swiper/vue";
  import { Pagination } from 'swiper';
  // define your modules list here
  const modules = [Pagination]
</script>

Upvotes: 5

Related Questions