Migrate from Laravel Mix to Vite (#67)

package.json

@@ -1,11 +1,8 @@
 {
     "private": true,
     "scripts": {
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
-        "production": "mix --production"
+        "dev": "vite",
+        "build": "vite build"
     },
     "dependencies": {
         "marked": "^4.0.10",
@@ -15,11 +12,11 @@
     "devDependencies": {
         "@tailwindcss/container-queries": "^0.1.1",
         "@tailwindcss/typography": "^0.5.9",
+        "@vitejs/plugin-vue2": "^2.2.0",
         "autoprefixer": "^10.4.5",
-        "laravel-mix": "^6.0.43",
+        "laravel-vite-plugin": "^0.7.6",
         "postcss": "^8.4.12",
         "tailwindcss": "^3.0.24",
-        "vue-loader": "^15.9.8",
-        "vue-template-compiler": "^2.6.14"
+        "vite": "^4.3.5"
     }
 }

postcss.config.js

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

resources/dist/build/manifest.json

@@ -0,0 +1,12 @@
+{
+  "resources/css/cp.css": {
+    "file": "assets/cp-a354d7e4.css",
+    "isEntry": true,
+    "src": "resources/css/cp.css"
+  },
+  "resources/js/cp.js": {
+    "file": "assets/cp-195abd8e.js",
+    "isEntry": true,
+    "src": "resources/js/cp.js"
+  }
+}

resources/js/components.js

@@ -1,6 +1,6 @@
-import DefaultsPublishForm from './components/DefaultsPublishForm'
-import SocialImageFieldtype from './components/SocialImageFieldtype'
-import SourceFieldtype from './components/SourceFieldtype'
+import DefaultsPublishForm from './components/DefaultsPublishForm.vue'
+import SocialImageFieldtype from './components/SocialImageFieldtype.vue'
+import SourceFieldtype from './components/SourceFieldtype.vue'
 
 Statamic.booting(() => {
     Statamic.component('defaults-publish-form', DefaultsPublishForm)

src/ServiceProvider.php

@@ -83,12 +83,13 @@ class ServiceProvider extends AddonServiceProvider
         'web' => __DIR__.'/../routes/web.php',
     ];
 
-    protected $scripts = [
-        __DIR__.'/../resources/dist/js/cp.js',
-    ];
-
-    protected $stylesheets = [
-        __DIR__.'/../resources/dist/css/cp.css',
+    protected $vite = [
+        'input' => [
+            'resources/js/cp.js',
+            'resources/css/cp.css',
+        ],
+        'publicDirectory' => 'resources/dist',
+        'hotFile' => __DIR__.'/../resources/dist/hot',
     ];
 
     protected $policies = [

vite.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+import vue from '@vitejs/plugin-vue2';
+
+export default defineConfig({
+    plugins: [
+        laravel({
+            input: [
+                'resources/js/cp.js',
+                'resources/css/cp.css'
+            ],
+            refresh: true,
+            publicDirectory: 'resources/dist',
+            hotFile: 'resources/dist/hot',
+        }),
+        vue(),
+    ],
+});