1

I am trying to use swiper.js in my vue.js but it keep saying Module not found: Error: Can't resolve 'swiper/css'.

Failed to compile.

./src/components/HelloWorld.vue?vue&type=script&lang=js (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/HelloWorld.vue?vue&type=script&lang=js) Module not found: Error: Can't resolve 'swiper/css' in 'C:\Users\Rising\Desktop\Project_Vue\vue-slider-v2\src\components'

I did everything in the guide with npm i swiper and insert there code

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

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

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
      };
    },
  };
</script>

This is the guide I am following: https://swiperjs.com/vue

RisingCode
  • 333
  • 1
  • 3
  • 13

1 Answers1

0

i think their documentation is wrong. importing a specific file like this seems to work:

import 'swiper/swiper.min.css'

reference this SO

Kellen
  • 278
  • 2
  • 8