Bare minimum to get Vue 3 compiling ...

Includes all the dependencies that were already figured out from the other branch.

package.json

@@ -1,5 +1,6 @@
 {
   "name": "statamic",
+  "type": "module",
   "private": true,
   "scripts": {
     "dev": "rm -rf resources/dist/build && vite",
@@ -12,13 +13,16 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.2.5",
+    "@floating-ui/vue": "^1.0.6",
+    "@he-tree/vue": "^2.8.2",
     "@shopify/draggable": "^1.0.0-beta.12",
     "@tiptap/core": "^2.0.2",
     "@tiptap/extension-blockquote": "^2.0.2",
     "@tiptap/extension-bold": "^2.0.2",
     "@tiptap/extension-bullet-list": "^2.0.2",
     "@tiptap/extension-character-count": "^2.0.2",
     "@tiptap/extension-code": "^2.0.2",
+    "@tiptap/extension-code-block": "^2.4.0",
     "@tiptap/extension-code-block-lowlight": "^2.0.2",
     "@tiptap/extension-document": "^2.0.2",
     "@tiptap/extension-dropcursor": "^2.0.2",
@@ -44,60 +48,63 @@
     "@tiptap/extension-typography": "^2.0.2",
     "@tiptap/extension-underline": "^2.0.2",
     "@tiptap/pm": "^2.0.2",
-    "@tiptap/vue-2": "^2.0.2",
+    "@tiptap/vue-3": "^2.4.0",
     "alpinejs": "^3.1.1",
-    "autosize": "~3.0.12",
-    "axios": "^1.7.4",
+    "autosize": "~6.0.1",
+    "axios": "^1.6.0",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "codemirror": "^5.58.2",
+    "codemirror": "5.65.12",
     "cookies-js": "^1.2.2",
-    "floating-vue": "^1.0.0-beta.19",
+    "floating-vue": "^5.2.2",
     "fuse.js": "^7.0.0",
     "highlight.js": "^11.7.0",
-    "imask": "^6.6.0-alpha.0",
+    "imask": "^7.6.1",
     "laravel-echo": "^1.16.0",
-    "lowlight": "^2.8.1",
-    "marked": "^4.0.10",
+    "lowlight": "^3.1.0",
+    "marked": "^13.0.0",
     "marked-plaintext": "0.0.2",
+    "mitt": "^3.0.1",
     "moment": "^2.29.4",
-    "mousetrap": "~1.5.3",
+    "mousetrap": "~1.6.5",
     "nprogress": "^0.2.0",
     "pdfobject": "^2.2.7",
-    "portal-vue": "^1.5.1",
+    "portal-vue": "^3.0.0",
     "pretty": "^2.0.0",
-    "pusher-js": "^4.4.0",
+    "pusher-js": "^8.4.0-rc2",
     "qs": "^6.9.7",
-    "read-time-estimate": "0.0.2",
+    "read-time-estimate": "0.0.3",
     "resize-observer-polyfill": "^1.5.1",
     "speakingurl": "^14.0.1",
     "striptags": "^3.2.0",
     "svgo": "^3.0.0",
+    "tiny-emitter": "^2.1.0",
     "underscore": "~1.13.2",
     "uniqid": "^5.2.0",
     "upload": "^1.3.2",
-    "v-calendar": "^2.3.0",
+    "v-calendar": "^3.1.2",
     "validator": "^13.7.0",
-    "vue": "^2.7.14",
-    "vue-clickaway": "~2.2.2",
-    "vue-draggable-nested-tree": "^2.3.0-beta.1",
-    "vue-js-modal": "^2.0.1",
-    "vue-select": "^3.10.1",
-    "vue-toasted": "^1.1.27",
-    "vuex": "^3.1.2"
+    "vite-svg-loader": "^5.1.0",
+    "vue": "^3.4.27",
+    "vue-final-modal": "^4.5.4",
+    "vue-screen-utils": "^1.0.0-beta.13",
+    "vue-select": "4.0.0-beta.6",
+    "vue-toastification": "^2.0.0-rc.5",
+    "vue3-click-away": "^1.2.4",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-inject": "^5.0.3",
     "@tailwindcss/container-queries": "^0.1.0",
     "@tailwindcss/typography": "^0.5.9",
-    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vitejs/plugin-vue": "^5.0.5",
     "autoprefixer": "^10.4.0",
-    "cross-env": "^5.2.1",
+    "cross-env": "^7.0.3",
     "jest": "^29.4.2",
     "jest-environment-jsdom": "^29.4.2",
-    "laravel-vite-plugin": "^0.7.2",
+    "laravel-vite-plugin": "^1.0.4",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.0",
-    "vite": "^4.5.5"
+    "vite": "^5.2.13"
   }
 }

resources/js/bootstrap/App.vue

@@ -0,0 +1,4 @@
+<script>
+export default {
+}
+</script>

resources/js/bootstrap/statamic.js

@@ -0,0 +1,21 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+export default {
+
+    booting() {
+
+    },
+
+    config(config) {
+
+    },
+
+    start() {
+        this.$app = createApp(App);
+
+        this.$app.config.silent = false;
+        this.$app.config.devtools = true;
+    }
+
+}

resources/js/index.js

@@ -0,0 +1,2 @@
+import Statamic from './bootstrap/statamic.js';
+window.Statamic = Statamic;

src/Statamic.php

@@ -286,7 +286,7 @@ public static function cpViteAsset($asset)
     public static function cpViteScripts()
     {
         return static::cpVite()->withEntryPoints([
-            'resources/js/app.js',
+            'resources/js/index.js',
             'resources/css/tailwind.css',
         ]);
     }

vite.config.js

@@ -1,8 +1,8 @@
 import { defineConfig, loadEnv } from 'vite';
 import laravel from 'laravel-vite-plugin';
-import vue from '@vitejs/plugin-vue2';
+import vue from '@vitejs/plugin-vue';
 import inject from '@rollup/plugin-inject';
-import svgLoader from './vite-svg-loader';
+import svgLoader from 'vite-svg-loader';
 
 export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, process.cwd(), '');
@@ -14,7 +14,7 @@ export default defineConfig(({ mode }) => {
                 valetTls: env.VALET_TLS,
                 input: [
                     'resources/css/tailwind.css',
-                    'resources/js/app.js'
+                    'resources/js/index.js'
                 ],
                 refresh: true,
                 publicDirectory: 'resources/dist',
@@ -30,8 +30,13 @@ export default defineConfig(({ mode }) => {
         ],
         resolve: {
             alias: {
-                vue: 'vue/dist/vue.esm.js',
+                vue: 'vue/dist/vue.esm-bundler.js',
             }
+        },
+        optimizeDeps: {
+            include: [
+                'vue'
+            ]
         }
     }
 });