Flexible Flash Notifications with Inertia
This episode is for members only

Sign up to access "Flexible Flash Notifications with Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
04. Automatically picking up notifications in Inertia

Episodes

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

Transcript

00:00
So in the last episode, we used define props here to pull the notification in that we shared
00:04
within handleInertiaRequest. And that's fine for very, very basic use cases. But what we would have to do here if we wanted to use a library or a plugin
00:14
to display these like we saw in the introduction, we would have to watch this value and then perform some sort of action on it. Now, I'm going to give you an example of that.
00:23
And then I'm going to show you a better way that we can do this globally across our entire app. So let's go ahead and define a variable for the props here so we can start to actually watch on them.
00:34
And we're going to go ahead and import watch from view. So what we can do is we can watch for this value changing and then perform some sort of action when that happens. So we can go ahead and say watch props notification.
00:48
And then we can have a callback in here and then do something with that data. So let's just console.log worked for now. And let's just see what happens.
00:56
So we're going to come over to our console to take a look at this. And yeah, we just need to change this over because it's a non-reactive property.
01:05
And we're going to hit Do Something. And you can see it worked. So as soon as that new data comes in here, the watcher detects that this has changed.
01:13
And then it goes ahead and console logs out. And this is where you would flash the actual notification using a plugin. We're going to be using the toast package.
01:22
So we would say toast. And then we would grab the data from the event. And we would go ahead and do something with it. In fact, it's not going to be an event.
01:30
It's going to be the notification itself. So we would say something like toast notification. Maybe we had a type in here. And then we also had a body.
01:37
But this all gets a little bit too complicated. I'm not going to go any further with this. We're actually going to get rid of all of this because we're going to do this globally
01:44
with a plugin on a router change. And that makes a little bit more sense. So I'm going to get rid of all of that. We can get rid of the watcher here.
01:51
And we're also going to get rid of this notification on the page as well. We'll keep everything else the same. So we're still flashing that success message over in here.
02:01
Okay, so let's get started on building out our own plugin, which we're then going to register. So under JS, let's go ahead and create a plugins directory. It doesn't really matter too much where you put this.
02:12
And I'm going to call this notifications.js. In fact, I'm going to capitalize plugins here because everything else is. Okay, so we've got our plugin here,
02:22
the base of our plugin. Plugins are pretty easy to build in view. So we're going to go ahead and export out the name of the plugin, notifications.
02:31
And let's go ahead and create that out as a function in here, export cons, not exports. And inside of here, we just want to do something. So for example, if our plugin's sole purpose
02:44
was just to console log out, this is a plugin, that would be fine. So we're going to go over to app.js and we're going to register this here
02:53
like we have every other plugin. So we're going to go ahead and import this first of all. So import notifications from our plugin notification. And we're going to go ahead and use this
03:04
just down here like that. So that is basically our own plugin created, imported and used within our app. Now, as I said, you can build a plugin that does anything.
03:15
And in this case, when we refresh the page, all that happens is we get a console log out with this is a plugin. Not useful at the moment,
03:22
but let's change this around to get it to do something a little bit more useful. So to do this, what we're going to do, if we think about the way inertia works,
03:30
when we hit that button and we redirect back, technically that's a router change. We're redirecting back. So we can actually hook in to inertia's router,
03:41
or in this case, the router of our app to see when a router change has been performed or when we finished navigating or whatever you want to call it.
03:51
The hook is actually finished. So we're going to go ahead and import router here from inertia view three. And we're going to come down here
03:59
and we're going to hook into this. So we're going to say, when this finishes, we want to do something. So on a route change,
04:06
let's console log out router finish like so. Okay, so that should be enough for now to get this to work. No more console log out saying this is a plugin, but when we click on this,
04:18
you can see we get router finish. So now once we've been redirected back from somewhere, that's usually when something is going to be flashed to the screen or some sort of message is going to appear.
04:28
We can hook into this event to then detect if this is here. Now we do this by accessing that prop globally from here. And we can use the use page composable to do this within inertia view three.
04:45
So use page, and we can come down here and we can define out notification and we can invoke use page, which gives us access to all of the props that are passed
04:56
down so you can see that this is also completing for me. So we've got auth and user. We can grab pretty much anything out of here that we want to, but for us it's props.notification.
05:07
So that's what we handled or passed down here. So now that we've got the notification, let's go ahead and console log out this notification and now see what we get.
05:17
So if I click on that, there we go. So we're getting that now back, but now this is globally registered. So if we wanted to, again, use a plugin like Toast
05:27
to output this notification, we can just do that really easily like this. And that's handled everywhere for us. We're still not quite there yet
05:36
because we're going to make this a little bit more flexible. So it takes into account the type of notification automatically for us without having to do anything. But for now that is a good start.
05:45
So we've hooked into this. When we click on it, it goes ahead and gives us back the notification body. So what we can do in the next episode
05:52
is pull in a package like Toast to flash these notifications or show these notifications. And we can hook this into the plugin, the very simple plugin that we've just built.

Episode summary

In this episode, we tackle the challenge of showing notifications automatically when using Inertia.js in a Vue app. We start by looking at the basic way of handling notifications using defineProps and a watcher, which works but quickly gets messy if you want to display notifications with a library like Toast. You'd need to watch the notification prop in every relevant component, and that just isn't scalable or DRY.

So, instead, we look at a better way: creating a global Vue plugin. This way, we don’t have to sprinkle notification logic throughout every page or component — we handle it once for the entire app! We set up a new plugin in our project, register it in app.js, and make it listen for Inertia's router changes. That means each time navigation happens (like after a form is submitted), our plugin checks for notifications in a centralized spot.

By using Inertia's usePage composable, our plugin can access the page props globally and grab notifications out automatically. At this point, you could easily show a toast message or notification wherever you want, all from this one plugin.

Next time, we'll pull in a real toast notification library and wire it up, but now you’ve got a clean, global foundation for reacting to notification messages anywhere in your app!

Episode discussion

No comments, yet. Be the first!