複数のjQueryのバージョンをNuxt.jsのpagesディレクトリのローカルテンプレートで使い分けたい

現在jQuery 3.1.4のバージョンをトップページ（ローカルにheadメソッドにて）にCDNで読み込ませています。

index.vue

js
1head: {
2    bodyAttrs: {
3      id: 'overview'
4    },
5    script: [
6      {
7        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'
8      }
9    ]
10 }
11

そして同じやり方で下層ページに1.8.3のバージョンのjQueryをCDNで読み込ませています。
lower/index.vue

js
1head: {
2    bodyAttrs: {
3      id: 'lower'
4    },
5    script: [
6      {
7        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js'
8      }
9    ]
10 }

複数のjQueryで書いたものをassetsディレクトリに設置してモジュール化してimportして
ローカルのmountedメソッド内に展開しています。

例）~/assets/useragent.js

js
1/* global $ */
2export default function () {
3  // User agent
4  var _ua = (function (u) {
5    return {
6      Tablet: (u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) || u.indexOf("ipad") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1) || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1) || u.indexOf("kindle") != -1 || u.indexOf("silk") != -1 || u.indexOf("playbook") != -1,
7      Mobile: (u.indexOf("windows") != -1 && u.indexOf("phone") != -1) || u.indexOf("iphone") != -1 || u.indexOf("ipod") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1) || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1) || u.indexOf("blackberry") != -1
8    }
9  })(window.navigator.userAgent.toLowerCase());
10
11  // Is in viewport
12  $.fn.isInViewport = function (screen) {
13    var elementTop = $(this).offset().top;
14    var elementBottom = elementTop + $(this).outerHeight();
15
16    var viewportTop = $(window).scrollTop();
17    var viewportBottom = (viewportTop + $(window).height()) * screen;
18
19    return elementBottom > viewportTop && elementTop < viewportBottom;
20  };
21
22  $(window).on('load resize scroll', function () {
23    $('.shuffle-item--visible').each(function () {
24      if ($(this).isInViewport(4)) {
25        $(this).addClass('in_viewport');
26      } else {
27        $(this).removeClass('in_viewport');
28      }
29    });
30  });
31}

index.vue

js
1mounted: function() {
2    this.$nextTick(() => {
3      if (process.browser) {
4        JqueryEasing()
5        MagnificPopup()
6        useragent()
7        }
8    })
9  }
10}

調べたところnuxt.config.jsに下記の記載が必要などで記載しました（全てのページで共通importのため）
nuxt.config.js

js
1build: {
2    plugins: [
3      new webpack.ProvidePlugin({
4        $: 'jquery',
5        jQuery: 'jquery',
6        'window.$': 'jquery',
7        'window.jQuery': 'jquery'
8      })
9    ]
10}
11

npm run devをターミナルで起動させると下記のエラーが出ます。

These dependencies were not found:                    friendly-errors 17:19:16
                                                      friendly-errors 17:19:16
* $ in ./assets/js/useragent.js            friendly-errors 17:19:16
* jQuery in ./plugins/02_jquery.easing.1.3.min.js     friendly-errors 17:19:16
                                                      friendly-errors 17:19:16
To install them, you can run: npm install --save $ jQuery

多分先にjQueryが読み込まれてないのが原因かなと感じます。
どのようにすればjQueryのバージョンを変更して使用することが出来るのでしょうか。

その後調べていくとモジュール内のものは除外する記述が必要とのことでexternalを使用することにしました
nuxt.config.js

js
1build: {
2    extend(config, ctx) {
3      config.externals = {
4        jquery: 'jQuery'
5      };
6    }
7}

するとコンパイルは出来るようになったのですが
今度はブラウザのページには

**NUXTERROR
"Cannot find module 'jQuery' from '/ ~'" **

と表示されページは閲覧できません。

ローカルのheadメソッドに記載したものより先にmountedメソッドのものが読み込まれてる印象ですが
大変お手数ではございますがご教示頂ければ幸いと存じます。

CDNにこだわってるわけではなく複数バージョンを使う必要があるので
CDN以外でも全然問題ございません。

それでは宜しくお願いいたします。

maisumakun

2020/04/16 09:14

そもそも論ですが、なぜjQueryを、それも2種類を、Nuxt.jsと組み合わせて使うことになったのでしょうか。

sixth13

2020/04/16 10:28 編集

もともとムーバブルタイプのようなPHPつくっており、TOPは作り直して新しく、下層は流用でしたので下層に使用してるプラグインがjQueryのバージョン3に対応していないのとテンプレートの作りマスタッシュ構文が似ていてi18nに対応がフロントで必要になったのでNuxt.jsを採用しました。

storm3

2020/04/20 11:25 編集

headで読み込んだscriptは、レンダリング時にソースを取得しにいきます。なのでmountedの時点ではまだコードは取得されていないです。 SPAの場合、一番簡単なのではsetTimeout関数を使って、レンダリング後に処理実行させる方法です。ただ、読み込みに時間がかかった場合は、同じことが起きる可能性があります。多少コード量が多くなりますが、確実に読み込みが終わってから実行するには　1.methodsにjqueryを読み込み終わったらすぐ初期化したい処理を書いた関数を作る　2.その関数をbeforemontedでイベント登録しておく　3.headのscriptのonloadのなかでそのイベントを発火させれるようにする参考　https://codesandbox.io/s/jvp7o9z0ny?file=/pages/test.vue たぶん、こちらならSSRでもいけるかも（試していませんが）そもそもの質問が異なるjqueryを使い分けたいという内容の回答ではないのでコチラに記載しました。異なるjqueryを使うことに関しては、正直茨の道しか見えないので回答は遠慮しておきます。

sixth13

2020/04/21 02:03

ご回答誠にありがとうございます。 SSRなのですがトライしてみます！

行動規範の内容に同意します

回答1件

自己解決

質問への追記・修正の依頼からとりあえず解決？に至りました。

1.methodsにjqueryを読み込み終わったらすぐ初期化したい処理を書いた関数を作る
2.その関数をbeforemontedでイベント登録しておく
3.headのscriptのonloadのなかでそのイベントを発火させれるようにする

headメソッドのscriptにonloadでｊQuetyを読み込んだ後にmethods発火

js
1head() {
2    return {
3      bodyAttrs: {
4        id: 'photographer'
5      },
6      script: [
7        {
8          src:
9            'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js',
10          async: true,
11          onload: this.onJqueryLoad()
12        }
13      ]
14    }
15}

読み込み後に発火させたいmethodsを記入

js
1methods: {
2    onJqueryLoad() {
3      this.$nextTick(() => {
4        if (process.browser) {
5          JqueryEasing()
6        　MagnificPopup()
7        　useragent()
8        }
9      })
10    }
11}