I am working on a project with Quasar Framework. I wanted to integrate swiper slider. I have installed it with the npm command and I can see it’s installed version as [email protected]. However, when I insert the styling in the quasar.config.ts, I am getting 404 error for the css bundle. This is the part in the quasar.config.ts file:
css: ['app.scss', 'swiper/swiper-bundle.css'],
On the other side, if I remove it, and try to use it without the bundle, I am having an error as the following:
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)
Here is my SwiperSlider.vue
<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 the navigation and pagination, I cannot use the buttons to swipe through other slides. Please let me know if these information are not enough. Thanks in advance! (Please keep in mind that, in Quasar Framework projects, there are no main.ts or main.js file unlikely Vue projects)
List of thing I have tried already:
- I insert the css bundle on the quasar.config.ts file as I mention above. (Dind’t work)
- I tried to run it without the bundle, I used import for the bundles in the component. (Dind’t work)
- I asked GPT-4, but not giving a proper solution.
- I changed the sytax from
<script setup>to<script setup lang="ts"> - I also checked the other questions/answers from StackOverFlow, but not found what I need as well.
[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’;
You’re using swiper/vue component, however, it’s recommended by the documentation to use Swiper Element (Web Component) instead, which is very simple to use.
Create swiper.js file in Quasar’s boot directory
src/boot/swiper.js
// import function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
register();
Then in quasar.config.js add swiper as a boot file.
quasar.config.js
export default configure((/* ctx */) => {
return {
// https://v2.quasar.dev/quasar-cli/boot-files
boot: ["swiper"],
...
}
})
That is all that is necessary to get swiper working in Vue + Quasar project. You don’t need to import anything within your .vue component file.
Dealing with console warnings
As a side note, warnings will appear in the browser dev console that the swiper elements fail to resolve even though they function correctly. There is a solution to this posted on the swiper github for Vue projects. To implement the solution with Quasar, look for “viteVuePluginOptions” within quasar.config.js and make the following change:
quasar.config.js
viteVuePluginOptions: {
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes("swiper"),
},
},
},
The warnings will now be suppressed.
1