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 demonstrating the Modal package in action.

• Installation
  • Laravel
  • Vue 3
• Setup
  • Vite
  • Laravel Mix
• Usage
• Advanced Inertia
• Momentum

Installation

Laravel

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

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 [email protected]

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.

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

<template>
    <div>
        <!-- layout -->
        <Modal />
    </div>
</template>

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

Vite

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)
  }
})

Laravel Mix

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)
  }
})

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 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

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

Credits

• Boris Lepikhin
• All Contributors

License

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