Migrate from Laravel Mix to Vite

.env.example

@@ -45,8 +45,8 @@ 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}"
 
 PRIVATE_EMAIL=""
 

.gitignore

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

package.json

@@ -1,26 +1,22 @@
 {
     "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": {
         "@tailwindcss/forms": "^0.4.0",
         "@tailwindcss/typography": "^0.5.0",
         "alpinejs": "^2.7.3",
         "autoprefixer": "^10.4.0",
         "axios": "^0.25",
-        "laravel-mix": "^6.0.41",
         "lodash": "^4.17.19",
         "postcss": "^8.4.5",
         "postcss-import": "^14.0.1",
         "tailwindcss": "^3.0.6",
-        "tailwindcss-debug-screens": "^2.1.0"
+        "tailwindcss-debug-screens": "^2.1.0",
+        "vite": "^3.0.2",
+        "laravel-vite-plugin": "^0.6.0"
     },
     "dependencies": {
         "@fortawesome/fontawesome-free": "^5.15.4",

postcss.config.js

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

public/build/manifest.json

@@ -0,0 +1,19 @@
+{
+  "resources/js/app.js": {
+    "file": "assets/app.775f52d3.js",
+    "src": "resources/js/app.js",
+    "isEntry": true,
+    "css": [
+      "assets/app.a045f3e9.css"
+    ]
+  },
+  "resources/js/app.css": {
+    "file": "assets/app.a045f3e9.css",
+    "src": "resources/js/app.css"
+  },
+  "resources/css/app.css": {
+    "file": "assets/app.3f4d551d.css",
+    "src": "resources/css/app.css",
+    "isEntry": true
+  }
+}

resources/js/app.js

@@ -1,13 +1,13 @@
-require('./bootstrap');
+import './bootstrap';
 
 import Alpine from 'alpinejs';
 window.Alpine = Alpine;
 Alpine.start();
 
-require('@fortawesome/fontawesome-free/js/all.js');
+import '@fortawesome/fontawesome-free/js/all.js';
 
 import flatpickr from "flatpickr";
-require("flatpickr/dist/themes/dark.css");
+import "flatpickr/dist/themes/dark.css";
 
 flatpickr(".flatpickrSelector", {
     enableTime: true,

resources/js/bootstrap.js

@@ -1,12 +1,14 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
  * 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';
 
@@ -22,7 +24,7 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
 // 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,
 //     forceTLS: true
 // });

resources/views/layouts/app.blade.php

@@ -11,7 +11,7 @@
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
 
         <!-- Styles -->
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
+        @vite('resources/css/app.css')
 
         <!-- FavIcon -->
         <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('favicon/apple-touch-icon.png') }}">
@@ -23,7 +23,7 @@
         @livewireStyles
 
         <!-- Scripts -->
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        @vite('resources/js/app.js')
     </head>
     <body class="font-sans antialiased {{ env('APP_DEBUG') ? 'debug-screens' : '' }}">
         <x-jet-banner />