PHPackages pristavu/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. pristavu/momentum-modal ActiveLibrary[Utility & Helpers](/categories/utility) pristavu/momentum-modal ======================= Build dynamic modal dialogs for your Inertia-powered Laravel apps 1.0.0(1y ago)067MITPHPPHP ^8.0 Since Oct 11Pushed 1y agoCompare [ Source](https://github.com/pristavu/momentum-modal)[ Packagist](https://packagist.org/packages/pristavu/momentum-modal)[ GitHub Sponsors](https://github.com/lepikhinb)[ RSS](/packages/pristavu-momentum-modal/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (1)Dependencies (7)Versions (2)Used By (0) 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 27 — LowBetter than 49% of packages Maintenance37 Infrequent updates — may be unmaintained Popularity8 Limited adoption so far Community13 Small or concentrated contributor base Maturity44 Maturing project, gaining track record Bus Factor1 Top contributor holds 79.7% 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 Unknown Total 1 Last Release 578d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/2875b9ef72b09212f72a878c4eb30c237ad1adf460ddd1a1f376ef7d4090f83e?d=identicon)[pristavu](/maintainers/pristavu) --- Top Contributors [![lepikhinb](https://avatars.githubusercontent.com/u/17538801?v=4)](https://github.com/lepikhinb "lepikhinb (47 commits)")[![robertvansteen](https://avatars.githubusercontent.com/u/14931924?v=4)](https://github.com/robertvansteen "robertvansteen (3 commits)")[![pristavu](https://avatars.githubusercontent.com/u/4123729?v=4)](https://github.com/pristavu "pristavu (2 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (2 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)")[![vmitchell85](https://avatars.githubusercontent.com/u/1248035?v=4)](https://github.com/vmitchell85 "vmitchell85 (1 commits)") ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/pristavu-momentum-modal/health.svg) ``` [![Health](https://phpackages.com/badges/pristavu-momentum-modal/health.svg)](https://phpackages.com/packages/pristavu-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. 9446.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)