Vue-awesome-swiper: fail to import swiper

[Ivan-blade]

• page error

Module not found: Error :can't resolve 'swiper/dist/css/swiper.css'

• console warn

This dependency was not found:
* swiper/dist/css/swiper.css in ./src/main.js
To install it, you can run: npm install --save swiper/dist/css/swiper.css

• npm install --save swiper/dist/css/swiper.css

npm ERR! code ENOLOCAL
npm ERR! Could not install from "swiper\dist\css\swiper.css" as it does not contain a package.json file.

• source

import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import App from './App.vue';
import router from './router';
import store from './store';
import './assets/css/reset.css';
import './assets/fonts/iconfont.css';
import 'lib-flexible';
Vue.config.productionTip = false;

Vue.use(VueAwesomeSwiper);
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

[yuanhuanwebfront]

swiper.css in your node_modules directory, if you have "can't resolve 'swiper/dist/css/swiper.css", you should check the this file path is right?

[Ivan-blade]

I meet this problem two times,the first time, I rewrite the project and it works.the second time is now,I don't want to rewrite it but I don't know what to do

[surmon-china]

v4.0.0 was released!

May be you need reread the document. (Swiper was move to peerDependencies)

[fatid]

If you don't want to change anything in your code, just downgrage the package. The code is below:

npm i [email protected] --save

[vesper8]

For those scratching their head at this error. It's because it's not enough to just install vue-awesome-swiper, you have to explicitly also install the package swiper which wasn't required in V3. Just do a npm i swiper --save and it will work

[OtabekSadiridinov]

npm i swiper --save
or
yarn add swiper --save

and then:
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'