Build dynamic modal dialogs for your Inertia-powered Laravel apps

Fund package maintenance!

Installs: 73 308

Dependents: 2

Suggesters: 0

Security: 0

Stars: 384

Watchers: 9

Forks: 16

Open Issues: 14

v0.2.0 2023-01-22 22:30 UTC

This package is auto-updated.

Last update: 2023-09-23 00:40:08 UTC


Momentum Modal is a Laravel package that lets you implement backend-driven modal dialogs for Inertia apps.

Define modal routes on the backend and dynamically render them when you visit a dialog route.

Check out the demo app demonstrating the Modal package in action.



Install the package into your Laravel app.

composer require based/momentum-modal

Vue 3

The frontend package is only for Vue 3 now due to its adoption within the Laravel community.

Install the frontend package.

npm i momentum-modal
# or
yarn add momentum-modal

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.

npm i axios@1.2.0


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.

<script setup>
import { Modal } from 'momentum-modal'

        <!-- layout -->
        <Modal />

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


import { modal } from "momentum-modal"

  resolve: (name) => resolvePageComponent(name, import.meta.glob("./Pages/**/*.vue")),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(modal, {
        resolve: (name) => resolvePageComponent(name, import.meta.glob("./Pages/**/*.vue")),

Laravel Mix

import { modal } from "momentum-modal"

  resolve: (name) => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(modal, {
        resolve: (name) => import(`./Pages/${name}`),


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

// background context / base page
Route::get('{user}', ShowUser::class)

// modal route
Route::get('{user}/{tweet}', ShowTweet::class)

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

class ShowTweet extends Controller
    public function __invoke(User $user, Tweet $tweet)
        return Inertia::modal('Tweets/Show')
                'user' => $user,
                'tweet' => $tweet,
            ->baseRoute('', $user);

Find the example frontend implementation here.

Advanced Inertia


Take your Inertia.js skills to the next level with my book Advanced Inertia. Learn advanced concepts and make apps with Laravel and Inertia.js a breeze to build and maintain.


Momentum is a set of packages designed to improve your experience building Inertia-powered apps.

  • Modal — Build dynamic modal dialogs for Inertia apps
  • Preflight — Realtime backend-driven validation for Inertia apps
  • Paginator — Headless wrapper around Laravel Pagination
  • Trail — Frontend package to use Laravel routes with Inertia
  • Lock — Frontend package to use Laravel permissions with Inertia
  • Layout — Persistent layouts for Vue 3 apps
  • Vite Plugin Watch — Vite plugin to run shell commands on file changes




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