vueでjqueryを使おうとすると'$' is not defined

Question

こちらを参考にしてvueの中でjqueryのプラグインを使おうと思い

npm install jquery --save

を実行し
vueのmain.jsに

import jquery from 'jquery'
global.jquery = jquery
global.$ = jquery
window.$ = window.jQuery = require('jquery')

と記述してscriptの中でjqueryを使おうとしたところ'$' is not defined とエラーが出て進まなくなってしまいました。

原因がわかる方、ご教授願いします。

---

追記

jqueryを書き込んだところは

<template>
    <div id="countdown1">
        <main>
            <div class="countdown">

            </div>
        </main>
    </div>
</template>

<script>
export default {
  props: {
    day: Number,
    hour: Number,
    min: Number,
    sec: Number,
    timeout: Boolean
  },
  mounted:function() {
    // $('#countdown1').fireworks({
    //   sound: true, // sound effect
    //   opacity: 0.9,
    //   width: '100%',
    //   height: '100%'
    // })
  }
}
</script>

Comments

[maisumakun]

jQueryを使おうとしたスクリプトは、どこへどのように書いたのでしょうか？

Answer 1

exportを使うようなコードの中では、windowに入っているグローバル変数とは基本的に別世界となります。

強引にwindow.$で参照するか、あるいは逆に<script>内にimport $ from 'jquery';を書くか、どちらかで対応してください。

---

とはいえ、DOMを変化させる系のjQueryプラグインとVueの併用は、Vue側のDOM認識に破綻をきたす危険がありますので、あまりおすすめできません。

Comments

[HMTK]

無事に動いてくれました。
ただ併用はあまりよろしくないのですね。。
ありがとうございました。

Answer 2

そもそもjQueryを呼んで（組み込んで）ないのでは？