slickを使用する際jQuery is not definedというエラーがでる

Question

Vue.jsでslickを使用したいと思い、vue-slickをインストールしたのですが、以下のエラーが出て機能してくれません。

jquery-ui.js:14 Uncaught ReferenceError: jQuery is not defined

package.jsonの中身は以下の通りでjQueryのインストールはしております。

{
  "name": "cp-ver1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "css-scroll-snap-polyfill": "^0.1.2",
    "date-fns": "^1.30.1",
    "firebase": "^5.9.0",
    "register-service-worker": "^1.6.2",
    "rx-js": "0.0.0",
    "vue": "^2.6.6",
    "vue-router": "^3.0.1",
    "vue-rx": "^6.1.0",
    "vue-slick": "^1.1.15",
    "vuejs-clipper": "^0.2.10",
    "vuetify": "^1.5.5",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-plugin-pwa": "^3.5.0",
    "@vue/cli-service": "^3.6.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "jquery": "^3.4.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.5.21",
    "vuetify-loader": "^1.0.5"
  },
  "peerDependencies": {
    "jquery": "^3.3.1"
  }
}

また海外のサイトを参考にmain.jsには以下の通り記述しております。

import jQuery from 'jquery'

window.jQuery = jQuery
window.$ = jQuery

どこに問題があるかご教授いただけると助かります。よろしくお願い致します。

Answer 1

まず依存関係がおかしいのでpeerDependenciesではなくdependenciesにjqueryを記載し、devDependenciesのjqueryは消してください。

あとはjquery-ui.jsとmain.jsの読み込み順や、<script>タグにasync属性を付けてないかなど確認してください。

Comments

[Khy]

ご教授いただいた通りいじってみたら無事解決いたしました！
まだあまり理解できていないところが多いので色々勉強してみます。
ありがとうございました！