Skip to content

[6.x] Restructure frontend: adopt common/ + modules/ pattern#18964

Merged
brianjhanson merged 1 commit into
feature/inertia-uifrom
feature/inertia-restructure
May 26, 2026
Merged

[6.x] Restructure frontend: adopt common/ + modules/ pattern#18964
brianjhanson merged 1 commit into
feature/inertia-uifrom
feature/inertia-restructure

Conversation

@brianjhanson
Copy link
Copy Markdown
Contributor

Summary

Reorganizes resources/js/ following the Spatie Laravel/Inertia frontend structure, adapted for Vue 3.

New structure

resources/js/
├── common/          # Generic, domain-agnostic code
│   ├── components/  # UI primitives
│   ├── composables/ # Generic Vue composables
│   ├── form/        # Generic form inputs
│   ├── layouts/     # App layouts (was layout/)
│   ├── types/       # Shared types
│   └── utils/
├── 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
    ├── auth/
    ├── graphql/
    ├── install/
    ├── settings/
    ├── updater/
    └── utilities/

Key changes

  • common/ vs modules/: The guiding question — does it relate to a domain or feature of the app? Yes → modules/, No → common/
  • Page names deduplicated: Directory provides context, filename only expresses what's unique within it. SettingsEmailPage.vuesettings/Email.vue, LoginPage.vueauth/Login.vue, etc.
  • Module composables colocated: useEditableTable, useServerPagination, etc. live inside modules/admin-table/composables/ rather than a global flat directory
  • createCraftColumnHelper moved to utils/: It's a helper function, not a component — lives in modules/admin-table/utils/ (note: currently helpers/, see follow-up)
  • PHP Inertia keys updated: All Inertia::render() and ->inertiaPage() calls in src/Http/Controllers/ updated to use path-based keys (e.g. 'settings/Email')

Not in scope

  • packages/craftcms-cp/ — Lit-based web component library, untouched
  • resources/js/legacy.ts and legacy assets

Follow-up items

A few Vue convention adjustments worth a separate pass:

  • Single-word component names (Badge, Modal, Date, Empty, Pane, Text, Select, etc.) violate Vue Style Guide Priority A
  • AuthBase.vueAuthLayout.vue for consistency with other layouts
  • helpers/utils/ (JS/Vue convention)
  • pages/install/Install.vuepages/install/Index.vue for consistency with pages/updater/Index.vue

🤖 Generated with Claude Code

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>
@brianjhanson brianjhanson changed the base branch from 6.x to feature/inertia-ui May 26, 2026 14:45
@brianjhanson brianjhanson changed the title Restructure frontend: adopt common/ + modules/ pattern [6.x] Restructure frontend: adopt common/ + modules/ pattern May 26, 2026
@brianjhanson brianjhanson merged commit 5e9e332 into feature/inertia-ui May 26, 2026
brianjhanson added a commit that referenced this pull request May 26, 2026
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant