Modals in Inertia
Playing
01. Introduction and demo

Episodes

0%
Your progress
  • Total: 46m
  • Played: 0m
  • Remaining: 46m
Join or sign in to track your progress

Transcript

00:00
Modals in Inertia can be pretty tricky to implement, just because of the way that Inertia works, where we have a client side, a back end, but then we're hooking this up with a router.
00:10
So you can just create out a view component and then just render it based on some condition. But I'm going to show you in this mini course how to use the package Momentum Modal,
00:20
which makes this incredibly easy to work with modals. And this ties this really nicely into the routes that you've got. So we'll take a look at a really quick demo of this.
00:29
It looks pretty simple, but we're going to cover some of the really specific things that we can do with this modal. And this will allow you to just build these out
00:38
and pretty much do anything you need. So we're going to go over here just to the dashboard. We're just working with a completely fresh Laravel app with Laravel Breeze, of course with Inertia,
00:48
and I'm going to hit open modal. That is it. One of the things that we're going to be doing is styling this modal up with transitions,
00:54
if you need that. So you can see that this just nicely appears here. Now this just shows any content and you can very easily create these modals out
01:02
and just put any content you want in here. We can also click to close these either globally. So you might want to add a button at the top to close modals off,
01:12
or you might need to do this programmatically. For example, you might want a specific action to trigger a modal being closed. For example, clicking a button or calling a function
01:22
and then calling a close function. So let's go ahead and look at a more practical example here So we've got a very basic base app, which you can go ahead and grab if you want to follow along.
01:33
And this is just to create a new note. So you'll see here that this opens up the modal, the URL changes, so we can re-hit this to get the same modal up,
01:41
which is really, really nice the way that this works. And then we can just type a note in here, hit create note, that creates it. And of course the new data rolls in
01:51
and we can see that on the page and we can just keep doing that. And of course we can implement a close button here as well, if we wanted to.
01:57
So this looks pretty simple, but I'm gonna guide you through getting this, first of all, set up and installed within Inertia. Then we're gonna go ahead and start this out,
02:05
create a really basic modal. And we're gonna look at doing stuff like this within our form, where we have stuff that we need to do and then redirect to show the new data.
02:16
So let's go through, build this out and then you'll be pretty much set up to just introduce modals into your app, whatever you need to do.

Episode summary

In this intro episode, we're diving into the world of modals with Inertia.js, which can be a bit tricky because of how Inertia handles client-side and backend interactions, especially with routing. We'll quickly look at why rolling your own modal implementation can get complicated, then introduce you to the awesome Momentum Modal package that makes everything super easy – especially when you want your modals to play nicely with your routes.

You'll get a quick demo to see how Momentum Modal works, including dynamic content, transitions, and how it updates your URL for a more seamless user experience. We walk through opening and closing modals (both with buttons and programmatically), as well as a real-world example: a modal form for creating notes that instantly updates your dashboard.

By the end of this episode, you'll have a clear idea of what we'll build in this mini course – from installation all the way to building out functional, polished modals you can drop into any Inertia-powered Laravel app. Let's jump in and make modals fun (and easy) again!

Episode discussion

No comments, yet. Be the first!