Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
22. Hooking into Inertia’s router

Episodes

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

Transcript

00:00
We spoke a little bit earlier about how the router is kind of the heart of how Inertia works. Everything that we're doing here is using Inertia's router to make a request through to our backend. What we're going to do now is improve the flash message functionality that we've got here
00:16
by manually hooking into Inertia's router, and we're going to do this within a global plugin. So let's build this plugin out. It sounds a little bit scary, but it's actually very simple to do. We're going to go over to our JS section, create out a plugins directory, and we're going to create a notification.js or notifications.js plugin.
00:38
Okay, so let's register this plugin first of all. So let's go over to app.js, and we're going to go ahead and import this at the top here. Import notification from, and let's go into plugins and notifications, and let's call that notifications. And now we just want to use this in here. So let's say use this, and now we can just start
01:04
to build out the kind of shell of this. So we're going to go ahead and export out a notifications function. And then in here, let's just console log my plugin. So if we go over to any page, and that's not working. So yeah, we just need to make sure we import this properly at the top. So we pull this in because we're exporting that as notifications
01:31
from here. Okay, that's working. And sure enough, this is getting console logged out now on every single page because we're registering this globally. So now let's look at the very basics of hooking into Inertia's router. The first thing that we're going to do is import the router from the same place that we've been using it. So InertiaJS and Vue 3. But now what
01:54
we can do is we can say things like router on, and we can say things like start, finish, and there are a couple of other things as well, which are in the docs. Most of the time, we'll be using finish. This basically means when the router has finished routing, and we're on the page that we are expecting to land on. So let's just create out a closure in here, and let's
02:16
console log finish, just to see when this gets triggered. Now, when we give the page a refresh, we're making a full page request to this. So that's not using Inertia's router to send us off to a different page. But anything we do now, like clicking refresh comments, clicking over to another page is going to console log that out. So you can see that's been
02:37
console logged out twice now. So what we can do is use this to our advantage. We can say that every time the router finishes, we want to check to see if there is a global notification or message that needs to be flashed. So we can pretty much just replicate the functionality that we added here, not watching though this time, and just pick this data up.
03:01
So we're going to go ahead and just up here, pull in our use page composable. We're going to define this out in here. So in fact, we can manually just do that when we need it. We don't necessarily need to create a variable for this. And let's go ahead and import use toast from view toastification, because we're going to need that as well. So inside of here, we can go ahead and grab the
03:26
notification out by using use page just on its own, and then directly accessing props. And then remember, we're sharing that as message. So let's say message. Now we can just create a really quick if statement just to check if it has a body and it has a type, and then we can flash the message. So let's say if notification body, and we're going to null save this because that might
03:49
not exist. And we have a type in there as well. Then we want to go ahead and use the toast package that we have pulled in. And we haven't actually defined that. So let's do that just here really quickly. Use toast. And then we can call that passing in the notification body. And we can pass in the type as well. Or in your notifications like here, you can just pass down a list of options as
04:17
an array and directly pass that in. But we'll just keep it really simple for now. Okay, so now that we've got this in here, let's just really quickly recap. We know router on finish will be triggered every time we request a new page and we end up finishing and we're on that new page. That means that when we redirect back from our current comment store controller, this will be triggered. Then we
04:40
go ahead and fetch the global notification, which at the moment we are manually watching from inside of here. And then we do a couple of checks and just show that toast. Now this will work globally so we can get rid of the watcher here. We can even get rid of the composable being invoked here as well. And this should just work. So let's just try this out and keep our console open just in case.
05:02
So if I hit post and there we go. Sure enough, it works. So with a couple of simple additions to this, we now have global notification functionality by manually hooking in to Inertia's router. And you can use this to do anything you need to do at any point within your application. You just hook in with it and use any of the events that it supports.

Episode summary

In this episode, we dive into the core of how Inertia's router works and take things up a notch by enhancing our global flash messages. Instead of relying on individual page watchers to show notifications, we build out a global plugin that hooks directly into Inertia's router events.

Here's what happens step-by-step: we create a new notifications.js plugin and set it up as a global plugin in our Vue app. After making sure it's registered and working, we explore Inertia's router events like start and finish, but focus mostly on using finish since that's super handy for knowing when we've arrived at a new page. By listening to this event, we can reliably trigger any global actions—like showing a notification whenever the page changes.

We use the usePage composable to grab any messages shared to the frontend, check if there's something to show, and use the Vue Toastification plugin to actually pop up our notifications. The best part is: once this is set up, it works everywhere in the app—no more repetitive watchers in every page component!

By the end, we've created a flexible way to handle notifications that can be extended for other global tasks too. It's a pretty slick approach that keeps your code clean and DRY.

Episode discussion

No comments, yet. Be the first!