Inertia Modal Development

Overview

Use inertiaui/modal to open any Laravel route in a Modal or Slideover without modifying existing routes or controllers. Works with both React and Vue, supports nested modals, prefetching, local modals, headless mode, and TypeScript.

When to Activate

• Activate when working with modals or slideovers in a Laravel + Inertia.js application.
• Activate when code references ModalLink, Modal, HeadlessModal, ModalRoot, useModal, useModalStack, visitModal, or Inertia::modal().
• Activate when the user wants to open a route in a modal, configure modal behavior, use prefetching, set up nested modals, or communicate between modals.
• Activate when imports reference @inertiaui/modal-vue or @inertiaui/modal-react.

Scope

• In scope: modal routes, ModalLink, Modal component, configuration, prefetching, local modals, nested modals, event bus, reload props, deferred props, headless mode, base route/URL, styling.
• Out of scope: general Inertia.js routing without modals, non-Laravel backends.

Workflow

1. Identify the task (opening a modal, configuring behavior, setting up communication, etc.).
2. Read references/inertia-modal-guide.md and focus on the relevant section.
3. Apply the patterns from the reference, using the correct framework (React or Vue).