Add Layers demos - #24
Open
claudiodekker wants to merge 2 commits into
Open
Conversation
This was referenced Aug 27, 2026
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
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.
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.
useLayer()gives you. Layer-scoped requests, prop helpers, events, a layer's own title, layout, remembered state, and scroll position.keyas its identity.->interstitial(), plus what happens when a layer request hits a 403, 404, or 500.loadingoption.WhenVisible, andInfiniteScroll, all scoped to the layer without ever refetching the page beneath.The demos share a small set of components (
Modal.vueandSlideover.vuebuilt on Inertia's<Layer>, wired up through a singleLayerShell.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) andinertia-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.