Migrate from Laravel Mix to Vite

.env.example

@@ -48,5 +48,5 @@ PUSHER_APP_KEY=
 PUSHER_APP_SECRET=
 PUSHER_APP_CLUSTER=mt1
 
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

.gitignore

@@ -1,5 +1,6 @@
 /node_modules
 /public/hot
+/public/build
 /public/storage
 /storage/*.key
 /vendor

composer.json

@@ -2,15 +2,18 @@
     "name": "laravel/laravel",
     "type": "project",
     "description": "The Laravel Framework.",
-    "keywords": ["framework", "laravel"],
+    "keywords": [
+        "framework",
+        "laravel"
+    ],
     "license": "MIT",
     "require": {
         "php": "^8.0.2",
         "barryvdh/laravel-debugbar": "^3.6",
         "fruitcake/laravel-cors": "^2.0.5",
         "guzzlehttp/guzzle": "^7.2",
         "intervention/image": "^2.7",
-        "laravel/framework": "^9.0",
+        "laravel/framework": "^9.19",
         "laravel/sanctum": "^2.14",
         "laravel/tinker": "^2.7",
         "laravel/ui": "^3.4",

package.json

@@ -1,13 +1,8 @@
 {
     "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": {
         "axios": "^0.21.4",
@@ -27,7 +22,6 @@
         "jquery-datetimepicker": "^2.5.21",
         "jquery-sparkline": "^2.4.0",
         "jvectormap": "^2.0.4",
-        "laravel-mix": "^6.0.31",
         "load-google-maps-api": "^2.0.2",
         "lodash": "^4.17.21",
         "masonry-layout": "^4.2.2",
@@ -41,8 +35,11 @@
         "select2": "^4.0.11",
         "skycons": "^1.0.0",
         "sweetalert2": "^11.1.5",
-        "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"
     }
 }

readme.md

@@ -31,7 +31,7 @@ php artisan migrate:fresh --seed # Run migration and seed users and categories f
 
 yarn install # or npm i to Install node dependencies(>= node 9.x)
 
-npm run production # To compile assets for prod
+npm run build # To compile assets for prod
 
 ```
 
@@ -93,9 +93,9 @@ The current architecture of assets are inspired from [adminator](https://github.
 
 If you want to update the CSS, you can put them directly in [`resources/sass/app.scss`](https://github.com/kossa/laradminator/blob/master/resources/sass/app.scss#L72) or create new file under `resources/sass` and import it in [resources/sass/app.scss](https://github.com/kossa/laradminator/blob/master/resources/sass/app.scss#L5)
 
-> VERY IMPORTANT: Any change you make on resources you have to run : `npm run dev` or `npm run prod`.
+> VERY IMPORTANT: Any change you make on resources you have to run : `npm run dev` or `npm run build`.
 
-> If you have a lot of changes it's much better to run: `npm run watch` to watch any changes on your files, take a look on [browersync](https://laravel.com/docs/master/mix#browsersync-reloading)
+> If you have a lot of changes it's much better to run: `npm run dev` to watch any changes on your files, take a look on [browersync](https://laravel.com/docs/master/mix#browsersync-reloading)
 
 #### Create new CRUD
 

resources/js/app.js

@@ -1,5 +1,5 @@
 
-require('./bootstrap');
+import './bootstrap';
 
 // import Vue from 'vue';
 

resources/js/bootstrap.js

@@ -50,8 +50,8 @@
 
 // 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
 // });
 

resources/views/admin/default.blade.php

@@ -39,7 +39,7 @@
         </div>
     </div>
 
-    <script src="{{ mix('/js/app.js') }}"></script>
+    @vite('resources/js/app.js')
 
     <!-- Global js content -->
 

resources/views/layouts/partials/head.blade.php

@@ -8,8 +8,8 @@
     <title>{{ config('app.name', 'Laravel') }}</title>
 
     <!-- Styles -->
-    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
-    {{-- <link href="{{ mix('/css/rtl.css') }}" rel="stylesheet"> --}}
+    @vite('resources/css/app.css')
+    {{-- @vite('resources/css/rtl.css') --}}
 
     <!-- Global css content -->
 

vite.config.js

@@ -0,0 +1,24 @@
+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/sass/rtl.scss',
+                'resources/js/app.js',
+            ],
+            refresh: true,
+        }),
+        vue({
+            template: {
+                transformAssetUrls: {
+                    base: null,
+                    includeAbsolute: false,
+                },
+            },
+        }),
+    ],
+});