Download the PHP package emargareten/inertia-modal without Composer

Inertia Modal

Inertia Modal is a Laravel package that lets you implement backend-driven modal dialogs for Inertia apps. With this package, you can define modal routes on the backend and dynamically render them when you visit a dialog route.

[!NOTE] This package supports Vue 3 only

Installation

You can install the package via composer:

Frontend Setup

[!WARNING] The package utilizes axios under the hood. If your app is already using axios as a dependency, make sure to lock it to the same version Inertia uses.

Modal Component

Modal is a headless component, meaning you have full control over its look, whether it's a modal dialog or a slide-over panel. You are free to use any 3rd-party solutions to power your modals, such as Headless UI.

Put the Modal component somewhere within the layout.

[!NOTE] Ensure that the layout remains persistent throughout the entire application. If you have multiple layouts, create a base layout that should invoke the modal, using nested layouts.

Plugin

Set up a modal plugin with the same component resolver you use to render Inertia pages.

Vite

Laravel Mix

Usage

Modals have their own routes, letting you access them even via direct URLs. Define routes for your modal pages.

Render a modal from a controller. Specify the base route to render the background when the modal is accessed directly.

By default, the backdrop component will be preserved with its current [stale] data (besides for the validation errors), in most cases this is fine since it will refresh when we close the modal (redirect to the base route), if your app does need fresh data for the backdrop, add the refreshBackdrop method:

To force a specific route as the backdrop add the forceBase method:

This will force re-render of the base route (or even redirect to a different base route).

Both of the above methods can also accept a boolean whether to refresh etc.

Frontend implementation

Use the useModal() composable in your modal component.

This example is a simple headlessui modal, you can add more transitions etc. see https://headlessui.com/vue/dialog.

The redirect method will redirect to the base route, you can pass in all inertia visit options as a parameter.

The close method will close the modal without redirecting to the base route.

[!NOTE] For a more concise setup, consider configuring aliases instead of specifying the full path.

Using vite:

Using mix:

Now you can import the modules like this:

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

This package was highly inspired by momentum-modal

• emargareten
• All Contributors

License

The MIT License (MIT). Please see License File for more information.