Modals in Inertia
Playing
02. Setting up and triggering our first modal

Episodes

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

Transcript

00:00
OK, so I've got a fresh Laravel project set up here with Inertia and View.
00:05
And I've created a couple of routes which show a list of notes and also allow a note to be stored. We'll look at them later. But if you want to grab the starter kit,
00:13
you can grab that directly from the GitHub repository for this course. Now, the first thing that we're going to do is go ahead and install Momentum Modal.
00:21
Get this set up before we start to, obviously, create a modal and style it out. So let's head over to the GitHub repository. And we'll come down here to the Composer installs.
00:30
This needs to be installed on the back end as well as the front end. This provides some nice helpers for us to trigger modals and register modals.
00:39
So let's go ahead and pull in the Composer require. We'll head down here, and we will pull in the NPM requirement. And that's pretty much it.
00:47
We're done. So the first thing that we need to do is place the overall modal container somewhere in our app. So that would be, in the case of using Laravel Breeze,
00:58
the authenticated layout or a guest layout if you needed it to be in there. So basically, just the overall template for your app. This needs to be included in that location.
01:07
So we're going to go ahead and import this from that package. So import modal from Momentum and modal. And that's pretty much it. We're just going to go ahead and use this modal now.
01:21
Put it somewhere on the page. So we could put this just at the very bottom, just before the ending template. And that is now included on the page.
01:29
Let's head over. We don't see any errors. Great. So the next thing that we need to do
01:33
is head over to our app.js file, so the entry point where everything gets set up within Inertia. And we need to register this as a plug-in so it can work within the client side
01:44
so we can trigger these really easily. So let's go ahead and import the plug-in here, which is just a modal in lowercase from Momentum modal. And then we're going to come down here to our plug-in
01:57
section. You can see we're already using things like Ziggy and the base plug-in for Inertia. But we're going to go ahead and use that modal plug-in just
02:07
in here. Now, the really important thing here is we need to pass some options through to here to tell this how to resolve our modal components.
02:15
So let's go ahead and give some options in here. And then we're just going to talk about where we're going to put these. Now, you can put these anywhere because your modals are just
02:24
going to be view templates at the end of the day. It doesn't really matter. But what I'm actually going to do is outside of the pages directory,
02:31
I'm going to go ahead and create a new modals folder. You don't need to do this. You can do this directly within your pages directory and have these as sort of pages that you open.
02:39
But I like to keep these separate as modals. So we are going to go ahead and create a modals directory. And then in here, we need to work out how to resolve these components.
02:48
So we're going to use the resolve option. And this is pretty much just going to look like how we resolve normal pages within Inertia. So we can pretty much just grab this, actually,
02:57
and just paste it in here and make some changes to the way that we look this up. So instead of going into pages, we're going to go into the modals folder
03:06
that we've just created. And then again, here, we're going to change this to modals so we can look for the correct template when we
03:13
look inside of this directory. And that is pretty much it. That's all we need to do to look for the modals. Again, if you wanted these in pages
03:22
and you wanted these to be in a modals directory, then you would do that. So you can just change this around to however you like. OK, let's head over.
03:30
And I'm just going to go ahead and restart npm run dev just in case. Let's go over and give this a refresh. And everything looks good.
03:37
So let's trigger our first modal. We'll go through the steps to do that. Now, a modal is triggered via a route. So what we need to do if we wanted
03:47
to create an example modal, we need to register a route for every single modal that we create. And this is really nice because it means, as we saw from the introduction,
03:55
we can just land back on a route and that modal will be shown out again. So I'm going to go over to routes and web. We're going to ignore these two controllers
04:02
that we already have. And we're just going to create out a standard route like we would when we normally render an inertia page. So if we were creating a normal page,
04:10
we would just create a normal route out. And in this case, I'm going to say example. So let's go ahead and just comment this out and create a controller.
04:17
And we could do this all in a closure, but we're not really going to do that. So let's create out an example modal controller just inside of here.
04:27
And let's go ahead and reference that in here. So example modal controller. And that's it. And we're done.
04:33
And of course, we can give this a name and then reference it directly within our templates. So let's say modals.example. And let's say modals slash example.
04:43
OK, great. So let's reference this and actually click through to it within our app. Just before we do that, let's go ahead and add in an invoke
04:51
in here and just do nothing for now. So I'm going to come over to the dashboard. And we'll just link to this like we normally would within inertia.
05:00
So we're going to go ahead and put in our link here. We're going to use our href to use our route helper. And that is modals.example. And we're going to say open modal.
05:12
So just like linking through to a normal page within inertia. Let's go over and try this out. And yeah, we just need to make sure we import the link from inertia.
05:23
And there we go. So when I click on this, obviously nothing happens at the moment. Because within our invoke, we're not doing anything.
05:29
What we would normally do within invoke is use the inertia helper or the inertia facade to render out a specific view. So what we're not going to do is modals and then the example
05:40
modal that we're about to create. Instead, using this package, because we have a composer installed on this, it adds the functionality into the back end
05:49
and gives us a modal helper within here. So we can do this and then reference a modal that we have in our app. Now, we don't have a modal at the moment.
05:59
So I'm actually going to get rid of this, because remember, this is within a modals directory. Let's go over to our modals directory in here and create example.view.
06:11
And let's just create out a really simple template for now. So this is a modal. Obviously, it's not going to look like a modal at the moment, but we're referencing it in there.
06:19
Now, one thing that you need to do when you register this out and you reference the modal rather than the page that you want to render is a base route. This is really important, because your modal
06:31
sits on top of a route. Your base route is going to be whatever you see behind that modal by default. So for example, if you had a sign-in modal, you would probably
06:41
want your base route to be the home page, because in this case, if someone directly landed on slash login and they saw a modal, you might want your home page behind that by default. So we're going to go ahead and just
06:53
give the base route in here. This is just the named route. I'm just going to choose the dashboard here, because we're working on the dashboard.
06:59
So that is pretty much all we need to do to get this working. Let's head over and just give this a refresh and click. And what we should see is the modal appear. Now, obviously, it doesn't look like a modal at the moment.
07:10
But as you can see, when I click on this, it does actually trigger it. The URL changes, which is really important. So it obviously changes to the route that we registered.
07:18
And when I re-land on that, the modal is still open. So we can't really do much with this at the moment, because we haven't styled it out. We'll be doing that in the next episode.
07:26
But that is pretty much Momentum modal installed and working as we would expect. Our job now is just to style this up. So let's go to the next episode and look
07:35
at how we can create a common wrapper for all of our modals so we have some nice consistency. And so we can just easily get these modals on the page, however many we create.

Episode summary

In this episode, we dive right in by setting up our Laravel app to use the Momentum Modal package with Inertia and Vue. First, we make sure you've got the starter kit or a fresh project running. Then, we go over installing the necessary backend (Composer) and frontend (NPM) dependencies for Momentum Modal.

Once the package is installed, we walk through adding the modal container component to your main layout file, so it's available anywhere in your app. Next, we set up and register the modal plugin in your app.js, making sure everything is wired up so the modals work seamlessly on the client side.

We also talk about organizing our modal components and show how to create a dedicated modals directory (though you can keep them wherever you prefer). Then, we cover how to configure the resolver so Vue knows where to find these modal components.

After all that's set up, we create our first named route that will trigger a modal—just like a regular Inertia page route, but with a twist! We create a basic modal component, wire it up, and explain the importance of the base route (what appears behind the modal overlay). Finally, we click through and see the modal in action—it's very basic, but working!

At the end of the episode, we're set up with a fully functioning modal system, ready to style and expand in future episodes.

Episode discussion

No comments, yet. Be the first!