feature: move laravel mix setup to vite (#1460)

package.json

@@ -2,32 +2,29 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
+        "development": "NODE_ENV=development vite build --mode=development",
+        "watch": "NODE_ENV=development vite build --mode=development --watch",
         "prod": "npm run production",
-        "production": "mix --production"
+        "production": "NODE_ENV=production vite build"
     },
     "devDependencies": {
-        "axios": "^1.6",
+        "@vitejs/plugin-vue2": "^2.3.1",
+        "axios": "^1.6.8",
         "bootstrap": "^4.5.0",
-        "highlight.js": "^11.3.1",
+        "highlight.js": "^11.9.0",
         "jquery": "^3.5",
-        "laravel-mix": "^6.0.6",
-        "lodash": "^4.17.19",
-        "moment": "^2.29.4",
-        "moment-timezone": "^0.5.40",
-        "popper.js": "^1.12",
+        "laravel-vite-plugin": "^1.0.2",
+        "lodash": "^4.17.21",
+        "moment": "^2.30.1",
+        "moment-timezone": "^0.5.45",
+        "popper.js": "^1.16.1",
         "resolve-url-loader": "^5.0.0",
-        "sass": "^1.15.2",
-        "sass-loader": "^11.0.1",
-        "sql-formatter": "^3.1.0",
-        "vue": "^2.5.7",
-        "vue-json-pretty": "^1.6.2",
-        "vue-loader": "^15.9.6",
-        "vue-router": "^3.0.1",
-        "vue-template-compiler": "^2.5.21",
+        "sass": "^1.74.1",
+        "sql-formatter": "^4.0.2",
+        "vite": "^5.2.8",
+        "vue": "^2.7.16",
+        "vue-json-pretty": "^1.9.5",
+        "vue-router": "^3.6.5",
         "vue-copy-to-clipboard": "^1.0.3"
     }
 }

public/build/manifest.json

@@ -0,0 +1,25 @@
+{
+  "resources/img/favicon.ico": {
+    "file": "favicon.ico",
+    "src": "resources/img/favicon.ico"
+  },
+  "resources/js/app.js": {
+    "file": "app.js",
+    "name": "app",
+    "src": "resources/js/app.js",
+    "isEntry": true,
+    "css": [
+      "app.css"
+    ]
+  },
+  "resources/sass/styles-dark.scss": {
+    "file": "styles-dark.css",
+    "src": "resources/sass/styles-dark.scss",
+    "isEntry": true
+  },
+  "resources/sass/styles.scss": {
+    "file": "styles.css",
+    "src": "resources/sass/styles.scss",
+    "isEntry": true
+  }
+}

resources/js/app.js

@@ -6,8 +6,16 @@ import VueRouter from 'vue-router';
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
 import moment from 'moment-timezone';
+import popper from 'popper.js';
+import relatedEntries from './components/RelatedEntries.vue';
+import indexScreen from './components/IndexScreen.vue';
+import previewScreen from './components/PreviewScreen.vue';
+import alert from './components/Alert.vue';
+import copyClipboard from './components/CopyClipboard.vue';
 
-require('bootstrap');
+import.meta.glob(['../img/**']);
+
+import 'bootstrap';
 
 let token = document.head.querySelector('meta[name="csrf-token"]');
 
@@ -17,7 +25,7 @@ if (token) {
 
 Vue.use(VueRouter);
 
-window.Popper = require('popper.js').default;
+window.Popper = popper;
 
 moment.tz.setDefault(Telescope.timezone);
 
@@ -37,11 +45,11 @@ const router = new VueRouter({
 });
 
 Vue.component('vue-json-pretty', VueJsonPretty);
-Vue.component('related-entries', require('./components/RelatedEntries.vue').default);
-Vue.component('index-screen', require('./components/IndexScreen.vue').default);
-Vue.component('preview-screen', require('./components/PreviewScreen.vue').default);
-Vue.component('alert', require('./components/Alert.vue').default);
-Vue.component('copy-clipboard', require('./components/CopyClipboard.vue').default);
+Vue.component('related-entries', relatedEntries);
+Vue.component('index-screen', indexScreen);
+Vue.component('preview-screen', previewScreen);
+Vue.component('alert', alert);
+Vue.component('copy-clipboard', copyClipboard);
 
 Vue.mixin(Base);