Migrate from Laravel Mix to Vite

.env.example

@@ -30,7 +30,7 @@ CAPTCHA_PRIVATE=
 BUGSNAG_API_KEY=
 BUGSNAG_NOTIFY_RELEASE_STAGES=staging,production
 
-MIX_DISABLE_LOCATION_LOOKUP=false
+VITE_DISABLE_LOCATION_LOOKUP=false
 GOOGLE_MAPS_API_KEY=
 GOOGLE_MAPS_API_FRONTEND_KEY=
 

.github/workflows/test.yml

@@ -29,7 +29,7 @@ jobs:
                 php artisan key:generate
 
             - name: Build Assets
-              run: npm ci && npm run prod
+              run: npm ci && npm run build
 
             - name: PHPUnit
               run: vendor/bin/phpunit

.gitignore

@@ -14,3 +14,5 @@
 /.phpunit.cache
 .idea/*
 phpunit.xml
+/public/build
+/public/hot

package.json

@@ -1,13 +1,9 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "vite build",
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.0",
@@ -16,8 +12,6 @@
         "browser-sync": "^2.26.7",
         "browser-sync-webpack-plugin": "^2.2.2",
         "husky": "^8.0.1",
-        "laravel-mix": "^6.0.25",
-        "laravel-mix-purgecss": "^6.0.0",
         "lint-staged": "^13.0.3",
         "livewire-vue": "^0.3.1",
         "lodash": "^4.17.15",
@@ -27,9 +21,12 @@
         "stylelint": "^14.10.0",
         "stylelint-config-standard": "^27.0.0",
         "tailwindcss": "^3.3.1",
-        "vue": "^2.6.7",
+        "vue": "^2.7.0",
         "vue-loader": "^15.9.7",
-        "vue-template-compiler": "^2.6.10"
+        "vue-template-compiler": "^2.6.10",
+        "vite": "^3.0.2",
+        "laravel-vite-plugin": "^0.6.0",
+        "@vitejs/plugin-vue2": "^1.1.2"
     },
     "dependencies": {
         "cross-env": "^7.0.3",

postcss.config.js

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

resources/js/app.js

@@ -9,6 +9,7 @@ import Vue from 'vue';
 import VCalendar from 'v-calendar';
 import Dismiss from './directives/Dismiss';
 import 'livewire-vue'
+import '../css/app.css'
 
 window.Vue = Vue;
 

vite.config.js

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