[6.x] Inertia section edit

AGENTS.md

@@ -212,6 +212,13 @@ if (!$event->isValid) {
 - `src/User/Events/` - User-related events
 - `src/Plugin/Events/` - Plugin lifecycle events
 
+### Templates
+
+A portion of this port is moving from twig + jQuery templates into [Inertia](https://inertiajs.com/) + VueJs. The original twig templates are conttained in `resources/templates` the new Inertia Vue files will live in `resources/js`. 
+
+We're also building component library located in the `@craftcms/cp` package. Whenever possible, use components from that package to build out UI. 
+
+
 ## Common Pitfalls
 
 ### Unicode Characters in Source Files

packages/craftcms-cp/package.json

@@ -27,7 +27,8 @@
     "check:types": "tsc --noEmit",
     "storybook": "storybook dev -p 6006",
     "build:storybook": "storybook build",
-    "build:manifest": "custom-elements-manifest analyze --litelement --outdir dist"
+    "build:manifest": "custom-elements-manifest analyze --litelement --outdir dist",
+    "generate:vue-wrappers": "node ./scripts/generate-vue-wrappers.js"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -36,8 +37,11 @@
       "import": "./dist/cp.mjs",
       "require": "./dist/cp.cjs"
     },
-    "./src/*": "./src/*",
+    "./*": "./dist/*",
     "./dist/*": "./dist/*",
+    "./vue/*": "./dist/vue/*",
+    "./types/*": "./src/types/*",
+    "./services/*": "./dist/services/*",
     "./styles/*": "./dist/styles/*",
     "./utilities/*": "./dist/utilities/*",
     "./components/*": "./dist/components/*",

packages/craftcms-cp/scripts/build.js

@@ -7,6 +7,7 @@ import copy from 'recursive-copy';
 import {getDistDir, getRootDir, resolveFrom} from './utils.js';
 import {join} from 'path';
 import {deleteAsync} from 'del';
+import createVueWrappers from './generate-vue-wrappers.js';
 
 const spinner = ora({text: '@craftcms/cp', color: 'red'}).start();
 const isDeveloping = process.argv.includes('--develop');
@@ -86,9 +87,22 @@ async function generateStyles() {
   return Promise.resolve();
 }
 
+async function generateVueWrappers() {
+  spinner.start('Generating Vue Wrappers');
+
+  createVueWrappers();
+  return Promise.resolve();
+}
+
 async function buildAll() {
   try {
-    const steps = [cleanup, generateManifest, generateStyles, generateBundle];
+    const steps = [
+      cleanup,
+      generateManifest,
+      generateStyles,
+      generateVueWrappers,
+      generateBundle,
+    ];
 
     for (const step of steps) {
       await step();
@@ -142,6 +156,7 @@ async function runBuild() {
         clearTimeout(debounceTimer);
         debounceTimer = setTimeout(async () => {
           await generateManifest();
+          await generateVueWrappers();
         }, 100);
       }
     });