nuxt.jsでmagnificPopupプラグインを使用したい

Question

nuxt.jsでmagnificPopupプラグインを使用したく（既存サイトリプレイスの為そのまま移行を行っております。）

/plugins/jquery.magnific-popup.min.js
/assets/script.js(ここで指定)
を設置

/pages/inbdex.vue
に

<script>
import MagnificPopup from '~/plugins/jquery.magnific-popup.min'
import Script from '~/assets/js/script'

export default {
  mounted: function () {
    this.$nextTick(() => {
      if (process.browser) {
        MagnificPopup()
        Script()
      }
    })
  }
</script>

行うと
TypeError: $(...).magnificPopup is not a function
が出てしまい動作できません。

magnificPopupをassetsに移動させたり色々行っておりますが解決できませんでした。

大変お手数ではございますがご教示頂ければ幸いと存じます。

Answer 1

importを使うよりも
外部リソースを使うには？ - NuxtJS
にあるように、 nuxt.config.js の head か、ページの head() メソッドに追加すると良いのではないかと思います。

Comments

[sixth13]

ご回答誠にありがとうございます。
magnificPopup自体をカスタムしているのでCDNを使用しないでいければと考えております。

[aaharu]

CDNを使用しなくても、staticディレクトリに置いたものを設定できたはずです。
https://ja.nuxtjs.org/guide/directory-structure/#static-%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA

[sixth13]

ご回答誠にありがとうございます。

別件で立てた方が良いのですがjQueryのバージョンが問題があることがわかりました。
現在下記のような状態で複数のjqueryのCDNをローカルのheadメソッドで管理してるのでが
読み込み順序のせいかエラーが起きてしまいます

https://stackoverflow.com/questions/61205439/i-want-to-put-multiple-versions-of-jquery-in-cdn-in-nuxt

ローカルに置いたheadメソッド（CDNのjquery）とローカルに置いたmountedメソッド（jQueryで書かれた処理）はheadから読み込まれるのではないのでしょうか。