PHPackages                             based/momentum-modal - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. based/momentum-modal

ActiveLibrary[Utility & Helpers](/categories/utility)

based/momentum-modal
====================

Build dynamic modal dialogs for your Inertia-powered Laravel apps

v0.5.0(1y ago)462427.3k↓23.7%41[8 PRs](https://github.com/lepikhinb/momentum-modal/pulls)1MITPHPPHP ^8.0CI failing

Since Jun 27Pushed 1y ago9 watchersCompare

[ Source](https://github.com/lepikhinb/momentum-modal)[ Packagist](https://packagist.org/packages/based/momentum-modal)[ GitHub Sponsors](https://github.com/lepikhinb)[ RSS](/packages/based-momentum-modal/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (7)Versions (16)Used By (1)

Momentum Modal
==============

[](#momentum-modal)

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](https://modal.advanced-inertia.com) demonstrating the Modal package in action.

- [**Installation**](#installation)
    - [**Laravel**](#laravel)
    - [**Vue 3**](#vue-3)
    - [**React**](#react)
- [**Setup**](#setup)
    - [**Vite**](#vite)
    - [**Laravel Mix**](#laravel-mix)
- [**Usage**](#usage)
- [**Advanced Inertia**](#advanced-inertia)
- [**Momentum**](#momentum)

Installation
------------

[](#installation)

### Laravel

[](#laravel)

Install the package into your Laravel app.

```
composer require based/momentum-modal
```

### Vue 3

[](#vue-3)

Install the frontend package.

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

> **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.
>
> ```
> npm i axios@1.2.0
> ```

### React

[](#react)

Install the frontend package.

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

> **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.
>
> ```
> npm i axios@1.6.0
> ```

Setup
-----

[](#setup)

[Modal](https://github.com/lepikhinb/momentum-modal-plugin) 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](https://github.com/tailwindlabs/headlessui).

Put the `Modal` component somewhere within the layout.

### Vue 3 setup

[](#vue-3-setup)

```

import { Modal } from 'momentum-modal'

```

### React setup

[](#react-setup)

```
import {Modal} from 'momentum-modal-react';

export function Layout({children}) {
  return (

      {children}

  );
}
```

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

### Vite

[](#vite)

```
// Vue
import { modal } from "momentum-modal"

createInertiaApp({
  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")),
      })
      .use(plugin)
      .mount(el)
  }
})

// React
globalThis.resolveMomentumModal = (name) => {
  const pages = import.meta.glob('./Pages/**/*.jsx', {eager: true});
  return pages[`./Pages/${name}.jsx`];
};

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob('./Pages/**/*.jsx', {eager: true});
    return pages[`./Pages/${name}.jsx`];
  },
  setup({el, App, props}) {
    createRoot(el).render();
  },
});
```

### Laravel Mix

[](#laravel-mix)

```
// Vue
import { modal } from "momentum-modal"

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

// React
globalThis.resolveMomentumModal = (name) => require(`./Pages/${name}`);

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`),
  setup({el, App, props}) {
    createRoot(el).render();
  },
});
```

Usage
-----

[](#usage)

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)
    ->name('users.show');

// modal route
Route::get('{user}/{tweet}', ShowTweet::class)
    ->name('users.tweets.show');
```

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')
            ->with([
                'user' => $user,
                'tweet' => $tweet,
            ])
            ->baseRoute('users.show', $user);
    }
}
```

Find the example Vue 3 implementation [here](https://github.com/lepikhinb/momentum-modal-plugin/tree/master/examples).

Advanced Inertia
----------------

[](#advanced-inertia)

[![](https://camo.githubusercontent.com/6d303aa5ddd234c4e468400424ebf0c4267e6c5dba44e51f96dec88dc6e8b29f/68747470733a2f2f616476616e6365642d696e65727469612e636f6d2f6f672e706e67)](https://advanced-inertia.com)

Take your Inertia.js skills to the next level with my book [Advanced Inertia](https://advanced-inertia.com/). Learn advanced concepts and make apps with Laravel and Inertia.js a breeze to build and maintain.

Momentum
--------

[](#momentum)

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

- [Modal](https://github.com/lepikhinb/momentum-modal) — Build dynamic modal dialogs for Inertia apps
- [Preflight](https://github.com/lepikhinb/momentum-preflight) — Realtime backend-driven validation for Inertia apps
- [Paginator](https://github.com/lepikhinb/momentum-paginator) — Headless wrapper around Laravel Pagination
- [Trail](https://github.com/lepikhinb/momentum-trail) — Frontend package to use Laravel routes with Inertia
- [Lock](https://github.com/lepikhinb/momentum-lock) — Frontend package to use Laravel permissions with Inertia
- [Layout](https://github.com/lepikhinb/momentum-layout) — Persistent layouts for Vue 3 apps
- [Vite Plugin Watch](https://github.com/lepikhinb/vite-plugin-watch) — Vite plugin to run shell commands on file changes

Credits
-------

[](#credits)

- [Boris Lepikhin](https://twitter.com/lepikhinb)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

47

—

FairBetter than 94% of packages

Maintenance45

Moderate activity, may be stable

Popularity57

Moderate usage in the ecosystem

Community27

Small or concentrated contributor base

Maturity50

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 79% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~83 days

Recently: every ~231 days

Total

13

Last Release

428d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/b6613c6f0556c2c757fc04b42ed223be13c03a4f5e01288657882e1a2e8add36?d=identicon)[lepikhinb](/maintainers/lepikhinb)

---

Top Contributors

[![lepikhinb](https://avatars.githubusercontent.com/u/17538801?v=4)](https://github.com/lepikhinb "lepikhinb (49 commits)")[![robertvansteen](https://avatars.githubusercontent.com/u/14931924?v=4)](https://github.com/robertvansteen "robertvansteen (3 commits)")[![charlielangridge](https://avatars.githubusercontent.com/u/8578083?v=4)](https://github.com/charlielangridge "charlielangridge (2 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (2 commits)")[![vmitchell85](https://avatars.githubusercontent.com/u/1248035?v=4)](https://github.com/vmitchell85 "vmitchell85 (1 commits)")[![altercode](https://avatars.githubusercontent.com/u/2052011?v=4)](https://github.com/altercode "altercode (1 commits)")[![yoeriboven](https://avatars.githubusercontent.com/u/4047804?v=4)](https://github.com/yoeriboven "yoeriboven (1 commits)")[![choowx](https://avatars.githubusercontent.com/u/63900628?v=4)](https://github.com/choowx "choowx (1 commits)")[![josemariagomez](https://avatars.githubusercontent.com/u/43571126?v=4)](https://github.com/josemariagomez "josemariagomez (1 commits)")[![mysticseagull](https://avatars.githubusercontent.com/u/17753046?v=4)](https://github.com/mysticseagull "mysticseagull (1 commits)")

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/based-momentum-modal/health.svg)

```
[![Health](https://phpackages.com/badges/based-momentum-modal/health.svg)](https://phpackages.com/packages/based-momentum-modal)
```

###  Alternatives

[barryvdh/laravel-ide-helper

Laravel IDE Helper, generates correct PHPDocs for all Facade classes, to improve auto-completion.

14.9k123.0M687](/packages/barryvdh-laravel-ide-helper)[illuminate/pipeline

The Illuminate Pipeline package.

9346.6M213](/packages/illuminate-pipeline)[illuminate/pagination

The Illuminate Pagination package.

10532.5M862](/packages/illuminate-pagination)[spatie/laravel-pjax

A pjax middleware for Laravel 5

513371.8k11](/packages/spatie-laravel-pjax)[emargareten/inertia-modal

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

88103.7k](/packages/emargareten-inertia-modal)[spatie/laravel-mix-preload

Add preload and prefetch links based your Mix manifest

169176.0k2](/packages/spatie-laravel-mix-preload)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)