vue-awesome-swiperが動かない

Question

Nuxt.jsでスライダーを実装したかったので、①の手順でvue-awesome-swiperを使用したのですが、②のようなエラーが出てしまいます。該当cssファイルがないような気がしていますが、解決策が見出せずに困っています。
どなたかご回答いただけたら幸いです。

①作業した手順
使用コマンド

npm install swiper vue-awesome-swiper –save

plugin
∟vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

nuxt.config.js

css: [
    'swiper/dist/css/swiper.css'
  ],
plugins: [
    {  src: '@/plugins/vue-awesome-swiper.js', ssr: false  }
  ],
build: {
    vendor: [
      'vue-awesome-swiper'
    ]
 }

pages
∟index.vue

<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

②エラー

Error: Could not compile template /Users/seijirousasabuchi/Desktop/htdocs/localhost2/nuxt-portfolio/node_modules/@nuxt/vue-app/template/App.js: Cannot resolve "swiper/dist/css/swiper.css" from "/Users/seijirousasabuchi/Desktop/htdocs/localhost2/nuxt-portfolio/swiper/dist/css/swiper.css"


        at node_modules/@nuxt/builder/dist/builder.js:6044:17
at async Promise.all (index 3)
at async Builder.compileTemplates (node_modules/@nuxt/builder/dist/builder.js:6022:5)
at async Builder.generateRoutesAndFiles (node_modules/@nuxt/builder/dist/builder.js:5709:5)
at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5621:5)
at async Object._buildDev (node_modules/@nuxt/cli/dist/cli-dev.js:102:5)
at async Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:60:7)
at async Object.onWatchRestart (node_modules/@nuxt/cli/dist/cli-dev.js:131:5)
at async Nuxt.callHook (node_modules/hable/dist/hable.js:1:1021)
at async FSWatcher.<anonymous> (node_modules/@nuxt/builder/dist/builder.js:6245:9)

下記参考にしました
https://www.npmjs.com/package/vue-awesome-swiper
https://qiita.com/hiroyukiwk/items/4ead9e150579363d50bb

補足

下記のcss箇所をとりのぞくと上記のエラーは消え、表示はされるのですが、スライダーがうまく機能しません。
縦並びに表示されます。ただ、検証してみると、スライダー箇所にswiper-slideやactiveクラスがついているので、何かしら動いてはいます。おそらくjs側は動いていて、cssが読み込まれればうまくいくのではないかと睨んでいます。

plugin
∟vue-awesome-swiper.js

import 'swiper/dist/css/swiper.css'

nuxt.config.js

css: [
    'swiper/dist/css/swiper.css'
]

Answer 1

参考にしているQiitaの記事は以前のバージョンのものについて書かれているのだと思います。
vue-awesome-swiper の方のみ参考にした方がいいです。

依存しているswiperのバージョンが異なるので、CSSのインポートは下記のパスになります。

import 'swiper/css/swiper.css'

Comments

[seisei]

パスは違いましたが、上記ヒントになり、下記を参考に解決することができました。ありがとうございます。
import 'swiper/swiper-bundle.css'

https://qiita.com/kinshist/items/8a745b3466a1e3b5a7bc

[aaharu]

swiperのバージョン4が`swiper/dist/css/swiper.css`、バージョン5が`swiper/css/swiper.css`、バージョン6が`swiper/swiper-bundle.css`ですね。
自身でswiperを依存に6以上で追加しているとそうなります。

vue-awesome-swiper自体はpeerDependenciesにバージョン5を指定してるようです。