[4.x] Mix to Vite migration

package.json

@@ -1,20 +1,16 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
+        "@vitejs/plugin-vue2": "^2.2.0",
         "axios": "^0.21",
         "bootstrap": "^4.5.0",
         "highlight.js": "^11.3.1",
         "jquery": "^3.5",
-        "laravel-mix": "^6.0.6",
+        "laravel-vite-plugin": "^0.8.1",
         "lodash": "^4.17.19",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.40",
@@ -23,11 +19,12 @@
         "sass": "^1.15.2",
         "sass-loader": "^11.0.1",
         "sql-formatter": "^3.1.0",
+        "vite": "^4.4.11",
         "vue": "^2.5.7",
+        "vue-copy-to-clipboard": "^1.0.3",
         "vue-json-pretty": "^1.6.2",
         "vue-loader": "^15.9.6",
         "vue-router": "^3.0.1",
-        "vue-template-compiler": "^2.5.21",
-        "vue-copy-to-clipboard": "^1.0.3"
+        "vue-template-compiler": "^2.5.21"
     }
 }

public/build/manifest.json

@@ -0,0 +1,24 @@
+{
+  "resources/js/app.css": {
+    "file": "assets/app-078b96bc.css",
+    "src": "resources/js/app.css"
+  },
+  "resources/js/app.js": {
+    "css": [
+      "assets/app-078b96bc.css"
+    ],
+    "file": "assets/app-f966f027.js",
+    "isEntry": true,
+    "src": "resources/js/app.js"
+  },
+  "resources/sass/app-dark.scss": {
+    "file": "assets/app-dark-54427812.css",
+    "isEntry": true,
+    "src": "resources/sass/app-dark.scss"
+  },
+  "resources/sass/app.scss": {
+    "file": "assets/app-7fe7ae9e.css",
+    "isEntry": true,
+    "src": "resources/sass/app.scss"
+  }
+}

resources/js/app.js

@@ -6,8 +6,13 @@ import VueRouter from 'vue-router';
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
 import moment from 'moment-timezone';
+import RelatedEntries from './components/RelatedEntries.vue';
+import IndexScreen from './components/IndexScreen.vue';
+import PreviewScreen from './components/PreviewScreen.vue';
+import AlertComponent from './components/Alert.vue';
+import CopyClipboard from './components/CopyClipboard.vue';
 
-require('bootstrap');
+import 'bootstrap';
 
 let token = document.head.querySelector('meta[name="csrf-token"]');
 
@@ -17,7 +22,8 @@ if (token) {
 
 Vue.use(VueRouter);
 
-window.Popper = require('popper.js').default;
+import Popper from 'popper.js';
+window.Popper = Popper;
 
 moment.tz.setDefault(Telescope.timezone);
 
@@ -37,11 +43,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', AlertComponent);
+Vue.component('copy-clipboard', CopyClipboard);
 
 Vue.mixin(Base);