Currently, I am working on a project utilizing the Quasar Framework and aiming to integrate the swiper slider. After successfully installing it using the npm command, I verified its version as
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ae9edf3eaffe8daababb4abb4aba8">[email protected]</a> css: ['app.scss', 'swiper/swiper-bundle.css'],On the contrary, if I remove the bundle and try to utilize it without, I faced the following error message:
Uncaught SyntaxError: The requested module '/node_modules/.q-cache/vite/spa/deps/swiper.js?t=1725545338593&v=dd38fd58' does not provide an export named 'Navigation' (at SwiperSlider.vue:24:22)
Provided above is my SwiperSlider.vue code snippet.
<template>
<div>
<swiper
class="mySwiper"
:slides-per-view="1"
:navigation="true"
:pagination="true"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
</div>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
</script>
<style scoped>
.mySwiper {
width: 100%;
height: 300px;
}
</style>
Without incorporating navigation and pagination, I am unable to use buttons for swiping through other slides. Kindly inform me if additional information is required. Thank you in advance! (Note that in Quasar Framework projects, there are no main.ts or main.js files unlike Vue projects)
List of attempted solutions:
- I added the CSS bundle in the quasar.config.ts file as mentioned earlier (Did not work)
- I tried running it without the bundle, importing the bundles in the component (Did not work)
- Consulted GPT-4 but did not receive a suitable solution
- Modified syntax from
<script setup>to<script setup lang="ts"> - Checked queries/answers on Stack Overflow, yet unsuccessful in finding desired solution
[vue-tsc] Cannot find module 'swiper/vue' or its corresponding type declarations. /Users/tolgahandayanikli/Desktop/Quasar Dashboard/src/components/Miscellaneous/SwiperSlider/SwiperSlider.vue:17:37 15 | 16 |
17 | import { Swiper, SwiperSlide } from 'swiper/vue'; | ^^^^^^^^^^^^ 18 | import 'swiper/css'; 19 | import 'swiper/css/navigation'; 20 | import 'swiper/css/pagination';