[6.x] Inertia UI

[brianjhanson]

Opening this as the Super Branch™ that we'll merge into while converting the UI over to inertia and Vue. A handful of branches have already made it into 6.x, but it's getting harder to make sure things don't break while work is in progress. Merging updates into this branch first will help insulate the main 6.x branch from at least front-end messes.

---

This brings some compatibility between the legacy javascript and our new inertia and Vue world. The result of all of this is a functional Section settings page which is initially rendered via Inertia but calls legacy code in order to render the slideouts and nested slideouts.

CleanShot.2026-04-08.at.14.33.30.mp4

CpAssetBundle

The CpAssetBundle is now loaded in both the Inertia and Twig render paths. Twig works as it always has. On the Inertia side, the HandleInertiaRequests middleware will register the CpAssetBundle and then inject the headHtml and bodyHtml into the app.blade.php template. That will throw the same old Craft global variable you know and love onto the page. With the variable on the page, when the cp.js file gets loaded by its position in bodyHtml it will populate the global variable with all the methods we've always had.

This means you can call your Craft.* Javascript just like you always have. The one caveat is that it's more possible than previously to create click handlers, etc. for content that will be loaded in after the fact.

At the moment you have both the legacy Craft global variable and the new Cp variable. Over time, we'll move methods and configuration from Craft to Cp .

Styling

Styling presented a bit of a challenge as we can have both old and new markup on a page at one time (if a slideout with legacy content is rendered for example). This can make styles a bit messy in some places, but I've done my best to isolate things.
The TailwindResetAsset will now only apply styles to .cp-legacy-reset, .slideout-container, .menu--disclosure and (almost) all legacy styles will only kick in when wrapped with a .cp-legacy class.
This falls down a bit for modals, menus, huds, etc. because we render those at the document root instead of in a container where we can add the cp-legacy class. Those styles are still applied globally for now.

Potential Breaking Changes

• Javascript registerred with the {% js %} twig tags will now result in a <script type="module"> tag. In theory, this shouldn't break anything because the load order will still be respected, but it is a shift.
• Event delegation is recommended so you can ensure your click handlers, etc. will fire even if the markup they expect isn't on the page when the handler is initially registerred.