Migrate from Laravel Mix to Vite

.gitignore

@@ -47,3 +47,5 @@ bin/
 lib/
 lib64
 pyvenv.cfg
+
+/public/build

package.json

@@ -1,32 +1,29 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
         "watch-production": "mix watch --production",
-        "watch-prod": "npm run watch-production",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "mix --production"
+        "watch-prod": "npm run dev-production",
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
         "autoprefixer": "^10.4.2",
         "axios": "^1.7.4",
         "bootstrap": "^4.5.3",
         "jquery": "^3.5.1",
-        "laravel-mix": "^6.0.41",
         "lodash": "^4.17.21",
         "popper.js": "^1.16.1",
         "postcss": "^8.4.31",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.49.0",
         "sass-loader": "^12.4.0",
         "tailwindcss": "^3.0.15",
-        "vue": "^2.6.14",
+        "vue": "^2.7.0",
         "vue-loader": "^15.9.8",
-        "vue-template-compiler": "^2.6.14"
+        "vue-template-compiler": "^2.6.14",
+        "vite": "^3.0.2",
+        "laravel-vite-plugin": "^0.6.0",
+        "@vitejs/plugin-vue2": "^1.1.2"
     },
     "dependencies": {
         "babel-helper-vue-jsx-merge-props": "^2.0.3",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

resources/js/app.js

@@ -5,7 +5,7 @@
  */
 
 
-require('./bootstrap');
+import './bootstrap';
 
 window.Vue = require('vue').default;
 import { i18n } from "./plugins/i18n.js"; // translation

resources/js/bootstrap.js

@@ -1,4 +1,5 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load jQuery and the Bootstrap jQuery plugin which provides support
@@ -19,7 +20,8 @@ try {
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
@@ -49,11 +51,11 @@ if (token) {
 
 // window.Echo = new Echo({
 //     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
 //     encrypted: true
 // });
 
 // Polyfills
 
-require('es6-object-assign/auto');
+import 'es6-object-assign/auto';

resources/js/components/SettingArray.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
     import draggable from 'vuedraggable'
 
     export default {

resources/js/components/SettingArraySubKeyed.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingArraySubKeyed",

resources/js/components/SettingBoolean.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingBoolean",

resources/js/components/SettingColor.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import BaseSetting from "./BaseSetting";
+import BaseSetting from "./BaseSetting.vue";
 
 export default {
     name: "SettingColor",

resources/js/components/SettingDirectory.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingDirectory",

resources/js/components/SettingEmail.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingEmail",

resources/js/components/SettingExecutable.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingExecutable",

resources/js/components/SettingFloat.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import BaseSetting from "./BaseSetting";
+import BaseSetting from "./BaseSetting.vue";
 
 export default {
         name: "SettingFloat",

resources/js/components/SettingGroupRoleMap.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script>
-import BaseSetting from "./BaseSetting";
+import BaseSetting from "./BaseSetting.vue";
 import LibrenmsSelect from "./LibrenmsSelect.vue";
 
 export default {

resources/js/components/SettingInteger.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingInteger",

resources/js/components/SettingLdapGroups.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script>
-import BaseSetting from "./BaseSetting";
+import BaseSetting from "./BaseSetting.vue";
 
 export default {
         name: "SettingLdapGroups",

resources/js/components/SettingMultiple.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingMultiple",

resources/js/components/SettingOxidizedMaps.vue

@@ -113,7 +113,7 @@
 </template>
 
 <script>
-import BaseSetting from "./BaseSetting";
+import BaseSetting from "./BaseSetting.vue";
 
 export default {
     name: "SettingOxidizedMaps",

resources/js/components/SettingPassword.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingPassword",

resources/js/components/SettingSelect.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingSelect",

resources/js/components/SettingSelectDynamic.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import BaseSetting from "./BaseSetting";
+import BaseSetting from "./BaseSetting.vue";
 import LibrenmsSelect from "./LibrenmsSelect.vue";
 
 export default {

resources/js/components/SettingSnmp3auth.vue

@@ -99,7 +99,7 @@
 </template>
 
 <script>
-import BaseSetting from "./BaseSetting";
+import BaseSetting from "./BaseSetting.vue";
 
 export default {
         name: "SettingSnmp3auth",

resources/js/components/SettingText.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-    import BaseSetting from "./BaseSetting";
+    import BaseSetting from "./BaseSetting.vue";
 
     export default {
         name: "SettingText",

vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+import vue from '@vitejs/plugin-vue2';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                'resources/sass/app.scss',
+                'resources/js/app.js',
+            ],
+            refresh: true,
+        }),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    base: null,
+                    includeAbsolute: false,
+                },
+            },
+        }),
+    ],
+});