Migrate from Laravel Mix to Vite

.env.example

@@ -6,7 +6,7 @@ APP_KEY=
 APP_DEBUG=true
 APP_URL=https://localhost
 
-MIX_APP_NAME="${APP_NAME}"
+VITE_APP_NAME="${APP_NAME}"
 
 VITE_APP_NAME="${APP_NAME}"
 
@@ -55,8 +55,8 @@ PUSHER_PORT=443
 PUSHER_SCHEME=https
 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}"
 
 VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
 VITE_PUSHER_HOST="${PUSHER_HOST}"

docker-compose.yml

@@ -10,6 +10,7 @@ services:
         image: sail-8.0/app
         ports:
             - '${APP_PORT:-80}:80'
+            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
         environment:
             WWWUSER: '${WWWUSER}'
             LARAVEL_SAIL: 1

package.json

@@ -1,14 +1,10 @@
 {
     "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 && php artisan ziggy:generate && mix --production --mix-config=webpack.ssr.mix.js",
-        "ssr": "node ./public/js/ssr.js"
+        "ssr": "node ./public/js/ssr.js",
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
         "@inertiajs/inertia": "^0.11.0",
@@ -21,7 +17,6 @@
         "axios": "^0.27.2",
         "cross-env": "^7.0",
         "howler": "^2.2.1",
-        "laravel-mix": "^6.0.43",
         "lodash": "^4.17.19",
         "moment": "^2.29.1",
         "moment-duration-format": "^2.3.2",
@@ -30,12 +25,15 @@
         "sass": "^1.52.1",
         "sass-loader": "^12.6.0",
         "tailwindcss": "^2.0.2",
-        "vue": "^2.5.17",
+        "vue": "^2.7.0",
         "vue-clickaway": "^2.2.2",
         "vue-loader": "^15.9.8",
         "vue-simple-markdown": "^1.1.4",
         "vue-template-compiler": "^2.6.10",
-        "webpack-cli": "^4.9.2"
+        "webpack-cli": "^4.9.2",
+        "vite": "^3.0.2",
+        "laravel-vite-plugin": "^0.6.0",
+        "@vitejs/plugin-vue2": "^1.1.2"
     },
     "dependencies": {
         "@inertiajs/server": "^0.1.0",

postcss.config.js

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

resources/js/app.js

@@ -61,7 +61,7 @@ files.keys().map((key) => Vue.component(key.split('/').pop().split('.')[0], file
 
 createInertiaApp({
   resolve: (name) => require(`./pages/${name}`),
-  title: (title) => process.env.MIX_APP_NAME + ` » ${title}`,
+  title: (title) => import.meta.env.VITE_APP_NAME + ` » ${title}`,
   setup({ el, App, props, plugin }) {
     Vue.use(plugin);
 

resources/js/ssr.js

@@ -64,7 +64,7 @@ createServer(
       page,
       render: createRenderer().renderToString,
       resolve: (name) => require(`./pages/${name}`),
-      title: (title) => process.env.MIX_APP_NAME + ` » ${title}`,
+      title: (title) => import.meta.env.VITE_APP_NAME + ` » ${title}`,
       setup({ app, props, plugin }) {
         Vue.use(plugin);
 
@@ -73,5 +73,5 @@ createServer(
         });
       },
     }),
-  process.env.MIX_SSR_PORT,
+  import.meta.env.VITE_SSR_PORT,
 );

resources/views/app.blade.php

@@ -14,8 +14,8 @@
     @routes
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
-    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
-    <script src="{{ mix('/js/app.js') }}" defer></script>
+    @vite('resources/css/app.css')
+    @vite('resources/js/app.js')
 
     <script>
         if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {

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,
+                },
+            },
+        }),
+    ],
+});