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.
10 episodes• 46 mins

Overview

Effortlessly add modals to your Inertia applications with the momentum-modal package.

In this course, we’ll get modals set up, design a customisable modal container with transitions, then cover everything you need to know about working with modals in your Inertia applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!