based/momentum-modal

Build dynamic modal dialogs for your Inertia-powered Laravel apps

Fund package maintenance!
lepikhinb

Installs: 240 886

Dependents: 3

Suggesters: 0

Security: 0

Stars: 446

Watchers: 9

Forks: 31

Open Issues: 20

v0.3.0 2024-03-13 04:13 UTC

This package is auto-updated.

Last update: 2024-10-21 07:47:25 UTC


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 using axios 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 using axios 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.