Vue-awesome-swiperがエラーで使えない

サイトのトップにスライドショーを入れたくて、Vue-awesome-swiperを使うことにしたのですが
エラーがなかなか直せません、おしえていただきたいです。
現在出ているエラーと、すでに書いてあるコードをその下に載せておきます。

#エラー

Nuxt
1Could not compile template /Users/a/Desktop/media/node_modules/@nuxt/vue-app/template/App.js: Cannot resolve "swiper/dist/css/swiper.css" from "/Users/a/Desktop/media/swiper/dist/css/swiper.css"
2
3  at node_modules/@nuxt/builder/dist/builder.js:6044:17
4  at async Promise.all (index 1)
5  at async Builder.compileTemplates (node_modules/@nuxt/builder/dist/builder.js:6022:5)
6  at async Builder.generateRoutesAndFiles (node_modules/@nuxt/builder/dist/builder.js:5709:5)
7  at async Builder.build (node_modules/@nuxt/builder/dist/builder.js:5621:5)
8  at async Object._buildDev (node_modules/@nuxt/cli/dist/cli-dev.js:102:5)
9  at async Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:60:7)
10  at async Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:47:5)
11  at async NuxtCommand.run (node_modules/@nuxt/cli/dist/cli-index.js:2798:7)

#現状やったこと

Vue-awesome-swiper.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

nuxt.config.js

export default {
中略〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
css: [
    'swiper/dist/css/swiper.css'
  ],
  plugins: [
    { src: '~plugins/vue-awesome-swiper', ssr: false }
  ],
中略〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
  build: {
     extend(config, ctx) {},
     transpile: ['gsap'],
    vendor: [
      'vue-awesome-swiper'
    ]
  }
}

index.vue

<template lang="pug">
.p-index-top__content
  client-only
    swiper(:options="swiperOption")
      swiper-slide.swiper-content(v-for="item in items")
        .p-index-top__slider__visual
          img.top__slider__visual-img(:src="item.src")
          .p-index-top__slider__textarea
            h2.top__slider__title {{ item.title }}
            p.top__slider__text {{ item.text }}
            a.top__slider__link(:href="item.link")
    .swiper-button-prev
    .swiper-button-next
</template>