Vue3 and Swiper component - using Pagination in composition API - vue-component

Question

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?

Answer 1

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>