質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

1回答

8558閲覧

vue-awesome-swiperが動かない

seisei

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2020/07/31 03:28

編集2020/07/31 03:58

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' ]

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

import 'swiper/css/swiper.css'

投稿2020/07/31 04:23

aaharu

総合スコア441

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aaharu

2020/07/31 05:25 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問