based / momentum-modal
Build dynamic modal dialogs for your Inertia-powered Laravel apps
Fund package maintenance!
lepikhinb
Installs: 248 553
Dependents: 3
Suggesters: 0
Security: 0
Stars: 450
Watchers: 10
Forks: 32
Open Issues: 20
Requires
- php: ^8.0
- illuminate/support: ^8.24|^9.0|^10.0|^11.0
- inertiajs/inertia-laravel: ^0.6|^1.0
Requires (Dev)
- laravel/pint: ^0.1.3|^1.13
- nunomaduro/larastan: ^1.0|^2.0
- orchestra/testbench: ^6.9|^7.0|^8.0|^9.0
- pestphp/pest: ^1.2|^2.34
- pestphp/pest-plugin-laravel: ^1.0|^2.3
README
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.
Installation
Laravel
Install the package into your Laravel app.
composer require based/momentum-modal
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 usingaxios
as a dependency, make sure to lock it to the same version Inertia uses.npm i axios@1.2.0
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 usingaxios
as a dependency, make sure to lock it to the same version Inertia uses.npm i axios@1.6.0
Setup
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.
Vue 3 setup
<script setup> import { Modal } from 'momentum-modal' </script> <template> <div> <!-- layout --> <Modal /> </div> </template>
React setup
import {Modal} from 'momentum-modal-react'; export function Layout({children}) { return ( <> {children} <Modal /> </> ); }
Set up a modal
plugin with the same component resolver you use to render Inertia pages.
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(<App {...props} />); }, });
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(<App {...props} />); }, });
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.
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
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
Credits
License
The MIT License (MIT). Please see License File for more information.