Replace Laravel mix with Vite

package.json

@@ -1,27 +1,24 @@
 {
     "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": {
         "@alpinejs/focus": "^3.9.6",
         "@docsearch/css": "^3.3.3",
         "@docsearch/js": "^3.3.3",
         "alpinejs": "^3.7.1",
-        "autoprefixer": "^10.4.0",
+        "autoprefixer": "^10.4.14",
         "babel-plugin-prismjs": "^2.0.1",
         "clipboard": "^2.0.10",
         "laravel-mix": "^6.0.25",
-        "postcss": "^8.4.5",
+        "laravel-vite-plugin": "^0.7.4",
+        "postcss": "^8.4.21",
         "postcss-import": "^14.0.0",
         "postcss-nested": "^5.0.1",
         "prismjs": "^1.22.0",
-        "tailwindcss": "^3.0.7"
+        "tailwindcss": "^3.3.0",
+        "vite": "^4.2.1"
     }
 }

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/build/manifest.json

@@ -0,0 +1,29 @@
+{
+  "resources/css/app.css": {
+    "file": "assets/app-0b249f60.css",
+    "isEntry": true,
+    "src": "resources/css/app.css"
+  },
+  "resources/js/app.js": {
+    "dynamicImports": [
+      "resources/js/docs.js",
+      "resources/js/components/accessibility.js"
+    ],
+    "file": "assets/app-ea607b40.js",
+    "isEntry": true,
+    "src": "resources/js/app.js"
+  },
+  "resources/js/components/accessibility.js": {
+    "file": "assets/accessibility-1f45336a.js",
+    "isDynamicEntry": true,
+    "src": "resources/js/components/accessibility.js"
+  },
+  "resources/js/docs.js": {
+    "file": "assets/docs-70f6ac97.js",
+    "imports": [
+      "resources/js/app.js"
+    ],
+    "isDynamicEntry": true,
+    "src": "resources/js/docs.js"
+  }
+}

resources/js/app.js

@@ -11,8 +11,8 @@ Alpine.start();
 
 document.addEventListener('DOMContentLoaded', () => {
     if (document.querySelector('#docsScreen')) {
-        require('./docs.js');
+        import('./docs.js');
     }
 
-    require('./components/accessibility');
+    import('./components/accessibility');
 });

resources/views/partials/layout.blade.php

@@ -43,7 +43,7 @@
     <link rel="preconnect" href="https://{{ config('algolia.connections.main.id') }}-dsn.algolia.net" crossorigin />
 
     <link rel="stylesheet" href="https://use.typekit.net/ins2wgm.css">
-    <link rel="stylesheet" type="text/css" href="{{ mix('css/app.css') }}">
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
 
     @production
         <!-- Fathom - beautiful, simple website analytics -->
@@ -69,7 +69,7 @@
     x-data="{
         navIsOpen: false,
     }"
-    class="language-php h-full w-full font-sans text-gray-900 antialiased"
+    class="w-full h-full font-sans antialiased text-gray-900 language-php"
 >
 
 @yield('content')
@@ -82,8 +82,6 @@ class="language-php h-full w-full font-sans text-gray-900 antialiased"
     var version = '{{ isset($currentVersion) ? $currentVersion : DEFAULT_VERSION }}';
 </script>
 
-<script src="{{ mix('js/app.js') }}"></script>
-
 <script>
     var _gaq=[['_setAccount','UA-23865777-1'],['_trackPageview']];
     (function(d,t){

vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: ['resources/css/app.css', 'resources/js/app.js'],
+            refresh: true,
+        }),
+    ],
+});