update: use alpinejs with laravel mix

package-lock.json

@@ -1527,6 +1527,19 @@
         }
       }
     },
+    "@vue/reactivity": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.11.tgz",
+      "integrity": "sha512-hEQstxPQbgGZq5qApzrvbDmRdK1KP96O/j4XrwT8fVkT1ytkFs4fH2xNEh9QKwXfybbQkLs77W7OfXCv5o6qbA==",
+      "requires": {
+        "@vue/shared": "3.2.11"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.11.tgz",
+      "integrity": "sha512-ovfXAsSsCvV9JVceWjkqC/7OF5HbgLOtCWjCIosmPGG8lxbPuavhIxRH1dTx4Dg9xLgRTNLvI3pVxG4ItQZekg=="
+    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -1791,6 +1804,14 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "alpinejs": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.3.3.tgz",
+      "integrity": "sha512-OkTHYz+DUXcGliDj2W45Q+sAxd4AAEsvyaczuPgp2+vFWl8uGRxPk1G7ySe1snbajJoGMjU6mbdaCQpXvdWPBw==",
+      "requires": {
+        "@vue/reactivity": "^3.0.2"
+      }
+    },
     "ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",

package.json

@@ -28,6 +28,7 @@
     "vue-template-compiler": "^2.6.14"
   },
   "dependencies": {
+    "alpinejs": "^3.3.3",
     "dayjs": "^1.10.7",
     "keen-slider": "^5.5.1",
     "node-vibrant": "^3.1.6"

resources/js/app.js

@@ -11,6 +11,9 @@ require('./bootstrap');
  * the page. Then, you may begin adding components to this application
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
+import Alpine from 'alpinejs';
+window.Alpine = Alpine;
+Alpine.start();
 
 import Vue from 'vue';
 import version from './components/Version';

resources/views/layout/default.blade.php

@@ -37,9 +37,8 @@
             </div>
         </div>
 
-        <script src="{{ mix('js/app.js') }}" crossorigin="anonymous"></script>
-        <script src="{{ mix('js/unit3d.js') }}" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
+        <script src="{{ mix('js/app.js') }}" crossorigin="anonymous" defer></script>
+        <script src="{{ mix('js/unit3d.js') }}" crossorigin="anonymous" defer></script>
 
         @if (config('other.freeleech') == true || config('other.invite-only') == false || config('other.doubleup') == true)
             <script nonce="{{ Bepsvpt\SecureHeaders\SecureHeaders::nonce('script') }}">