Skip to content

Add Layers demos - #24

Open
claudiodekker wants to merge 2 commits into
inertiajs:mainfrom
claudiodekker:layers
Open

Add Layers demos#24
claudiodekker wants to merge 2 commits into
inertiajs:mainfrom
claudiodekker:layers

Conversation

@claudiodekker

@claudiodekker claudiodekker commented Aug 27, 2026

Copy link
Copy Markdown

This adds a "Layers" section to the sidebar with eight interactive demos for the new Layers feature (inertiajs/inertia#3236), each backed by browser tests.

  • Modals & Slideovers: the basics. Opening a layer from a link, the page beneath keeping its state, layer URLs being real shareable URLs, and forms whose validation errors land on the layer.
  • Stacked Layers: a three-deep stack (slideover, then modal, then local layer), where Escape closes only the top layer and the back button walks down one layer at a time.
  • Local Layers: client-side layers with no server round trip. A confirmation prompt and a picker, both emitting events back to the page.
  • Inside a Layer: everything useLayer() gives you. Layer-scoped requests, prop helpers, events, a layer's own title, layout, remembered state, and scroll position.
  • Swapping Layers: a three-step wizard that moves through three URLs inside a single layer, using the layer key as its identity.
  • Detours: a layer that survives a full-page password prompt via ->interstitial(), plus what happens when a layer request hits a 403, 404, or 500.
  • Cold Opens: landing directly on a layer URL, with a delay picker and three different loading treatments to show the loading option.
  • Data in a Layer: polling, merged props, deferred props, prefetching, WhenVisible, and InfiniteScroll, all scoped to the layer without ever refetching the page beneath.

The demos share a small set of components (Modal.vue and Slideover.vue built on Inertia's <Layer>, wired up through a single LayerShell.vue) that are intentionally copy-paste-ready, so they double as a starting point for real apps.

Everything runs through one controller reusing the existing Contact, Organization, and Note models; no new models or migrations. The whole section is covered by 62 Pest browser tests.


Warning

This won't run until the Layers packages are in. Read below as for why:

This PR deliberately does not touch the dependency manifests. The code here needs the Layers versions of both @inertiajs/vue3 (inertiajs/inertia#3236) and inertia-laravel (inertiajs/inertia-laravel#903), but those only exist in their PRs right now, so there is nothing real to pin: committing a lock file or version constraint that points at unpublished code would break the install for everyone else.

So until the core and Laravel PRs are released, running this branch means linking those packages locally yourself (an npm/composer path link to a checkout of the PR branches). Once they're published, a normal dependency bump makes this work out of the box, and that bump should land together with (or just before) merging this.

EDIT: I've wired up the demo's assets into a separate repo just to make things easier: https://github.com/claudiodekker/inertia-layers-demo. It's the same thing that's live on https://inertia-layers-demo-production-kzzbdr.laravel.cloud/features/layers/dialogs/1 right now, and the same as if you'd link/wire up all the PR's yourself to get this PR to work locally, except it's already done for you.

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