[6.x] Inertia UI#18709
Merged
Merged
Conversation
Values aren't actually saving though
Use full entry types isntead of IDs
Reorganizes resources/js/ following the Spatie Laravel/Inertia frontend structure pattern, adapted for Vue 3. - common/ — generic, domain-agnostic code - layouts/ (was layout/) - components/ (generic UI primitives) - form/ (generic form inputs) - composables/ (generic Vue composables) - types/ (shared types) - utils/ (shared utilities) - modules/ — feature-specific domains - admin-table/ - auth/ - entry-types/ - install/ - navigation/ - permissions/ - plugin-manager/ - sections/ - settings/ - sites/ - updater/ - user/ - utilities/ - pages/ — Inertia pages reorganized into subdirs, names deduplicated - auth/, graphql/, install/, settings/, updater/, utilities/ - Domain prefix stripped (SettingsEmailPage → settings/Email) - Page suffix stripped (LoginPage → auth/Login) PHP Inertia::render() and ->inertiaPage() calls updated to use new path-based keys throughout src/Http/Controllers/. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
riasvdv
reviewed
May 26, 2026
… into feature/inertia-ui
Aligns test assertions with the page restructure from PR #18964. All component() calls now use the subdirectory path form that matches the new pages/ file layout (e.g. 'settings/Email' instead of 'SettingsEmailPage'). 17 test files updated across: - Feature/Integration/PagesTest.php - Feature/Http/Controllers/**/*Test.php - Feature/Http/Middleware/EnsureInstalledTest.php Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… into feature/inertia-ui
- Installs eslint@^9, typescript-eslint@^8, eslint-plugin-vue@^9 - Creates eslint.config.ts with recommended rules for TS + Vue 3 - Adds lint:js and lint scripts to package.json - Adds .github/workflows/js-ci.yml CI job - Updates .lintstagedrc.json to lint staged resources/js/ files - Disables vue/no-deprecated-slot-attribute: the codebase uses both Vue components (CamelCase) and Lit web components (kebab-case); web components require the HTML-standard slot="name" attribute which the rule cannot distinguish from deprecated Vue syntax Fixes found on first run: - Computed with side effects in ActionMenu.vue - Duplicate prop/computed locale key in Date.vue - Duplicate modelValue in defineModel + defineProps in CraftCombobox.vue - Missing v-for :key bindings (6 files) - @ts-ignore → @ts-expect-error with descriptions (cp.ts, Sites.vue, Install.vue) - Unused private field and dead import in login-challenge.ts - Missing imports for SelectOption, useFlashMessages, SystemMessagesController in SystemMessageEditModal.vue - Object → object primitive type in globals.d.ts - let → const for module-level ref in useFlashMessages.ts - eslint-disable comments for legacy Craft constructor interface patterns Widespread patterns downgraded to warnings for follow-up: - @typescript-eslint/no-explicit-any - @typescript-eslint/no-unused-vars Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
(hopefully)
Contributor
Author
|
Still a lot of work to do, but I'm going to merge this in as keeping it up to date with the 6.x branch is a little cumbersome. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
Included PRs
CpAssetBundle
The
CpAssetBundleis now loaded in both the Inertia and Twig render paths. Twig works as it always has. On the Inertia side, theHandleInertiaRequestsmiddleware will register theCpAssetBundleand then inject theheadHtmlandbodyHtmlinto theapp.blade.phptemplate. That will throw the same oldCraftglobal variable you know and love onto the page. With the variable on the page, when thecp.jsfile gets loaded by its position inbodyHtmlit 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
Craftglobal variable and the newCpvariable. Over time, we'll move methods and configuration fromCrafttoCp.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
TailwindResetAssetwill now only apply styles to.cp-legacy-reset, .slideout-container, .menu--disclosureand (almost) all legacy styles will only kick in when wrapped with a.cp-legacyclass.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-legacyclass. Those styles are still applied globally for now.Potential Breaking Changes
{% 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.