Build a Starter Kit With Inertia and Fortify
This episode is for members only

Sign up to access "Build a Starter Kit With Inertia and Fortify" right now.

Get started
Already a member? Sign in to continue
Playing
16. Building a toast plugin

Episodes

0%
Your progress
  • Total: 5h 21m
  • Played: 0m
  • Remaining: 5h 21m
Join or sign in to track your progress
01. Setting up
01. Introduction and demo
4m 30s
0%
02. Installing Inertia from scratch
11m 49s
0%
03. Installing Tailwind
3m 24s
0%
04. Layout and navigation
31m 15s
0%
05. Installing Fortify
6m 10s
0%
06. Exposing routes with Ziggy
6m 44s
0%
07. Global modals
23m 41s
0%
02. Authentication
08. Registering users
13m 56s
0%
09. Sharing the authenticated user globally
5m 48s
0%
10. Signing in
9m 27s
0%
11. Signing out
2m 39s
0%
12. Redirecting to the intended location
4m 58s
0%
03. Feature management
13. Adding feature management checks
3m 14s
0%
14. Client-side feature management
5m 53s
0%
04. Building a toast feature
15. Basic flash messages with Inertia
7m 51s
0%
16. Building a toast plugin
15m 38s
0%
17. Styling and transitioning the toast
4m 53s
0%
05. Profile management
18. Creating an account layout
13m 24s
0%
19. Detecting and highlighting current pages
5m 22s
0%
20. Updating profile details
9m 22s
0%
21. Profile photo output and swapping
9m 17s
0%
22. Storing a profile photo
13m
0%
23. Changing user passwords
9m 9s
0%
24. Account feature toggling
8m 19s
0%
06. Password confirmation
25. Using a modal for password confirmation
8m 16s
0%
26. Confirming user passwords
4m 23s
0%
07. Two factor authentication
27. Building the two factor modal
9m 7s
0%
28. Showing a QR code
7m 44s
0%
29. Enabling two factor authentication
6m 52s
0%
30. Disabling two factor authentication
1m 35s
0%
31. Showing recovery codes
4m 37s
0%
32. Fixing password confirm redirect
9m 42s
0%
33. Fixing password confirm flow when enabling
3m 26s
0%
34. Challenging the user when signing in
5m 58s
0%
08. Email verification
35. Mail setup and forcing email verification
4m 8s
0%
36. Adding a verification notice
3m 42s
0%
37. Resending the verification email
3m 27s
0%
09. Account recovery
38. Sending a recovery email
8m 45s
0%
39. Setting a new password
8m 22s
0%
10. Fixes and improvements
40. Closing the user navigation on click
2m 12s
0%

Transcript

00:00
So what we're doing at the moment is just within this Toast component, checking if that prop exists and just showing it on the page. Now this isn't great because ideally what we want to do is hook into
00:11
Inertia's lifecycle and when the next page comes in, so when the next page reload comes in, we want to trigger this Toast rather than just do an if statement within a template. Now the benefit of changing this over is if you want to switch this over to another plugin,
00:27
so if you find a third-party plugin to show a Toast message, you can just swap this implementation out really easily. Now we're going to be building our own plugin here just so we can learn a little bit about how this can actually work with a composable of our own.
00:43
But once we're done with the router stuff, you can feel free to switch this out. Okay, so we've got this in here at the moment. Let's kind of get rid of this because this is where our Toast message is going to show eventually. So let's just add Toast in there so we can see that at the top.
00:58
And let's first of all look at creating a plugin out which will hook into Inertia's lifecycle. So where do we register plugins? Well, we do that in app.js. So we're going to build our own plugin and then we're going to use that in there.
01:11
So let's go over to our js directory. Let's create our plugins folder and let's create our Toast plugin. And this is just a standard JavaScript file that we can register in here. Okay, so how do we hook into Inertia's router?
01:26
Well, let's go ahead and first of all just export from here a function. And let's just do a console log and say plugin. And let's go over to app.js and pull this plugin in. So that should have imported that just up there.
01:43
Great. Okay, so now if we just take a look at this in the console, you can see that that is registering that plugin and just console logging that out. So that is as simple as it is to just build a really basic plugin within Vue.
01:57
Okay, so what do we want to do here? Well, we want to go ahead and pull in and import Inertia's router. So we can hook into the next request and then grab this prop and do something with it, like trigger a Toast message.
02:11
So we're going to pull this in from Inertia Vue 3. And then to hook into Inertia's router, we can just say router on and then finish. So basically, this will be run for every single successful page finish when we transition to a new page or when we submit a form or anything like that.
02:30
So we can go ahead and hook into this and do something. So again, I'm just going to console log out, finish just so we can see how this works. So again, let's pull up our console and let's go ahead and just do anything. So let's click on sign out.
02:43
We get a finish. Click on sign in. We get a finish and so on and so forth. Every time we transition to a new page or submit a form, we get this logged out.
02:52
And that's perfect for a Toast because we could be flashing these at any point in our app's lifecycle. So inside of here, we want to grab that Toast message. So let's go ahead and create our variable for this.
03:04
And we need to extract this from our page, much like we did over here when we had page props Toast. So how do we do this? Well, let's get rid of what we have here and just swap that back over to Toast.
03:17
And let's look at using the use page directive in Inertia. So up here somewhere, we can go ahead and say page equals use page. And this directive will contain everything that we would normally be able to access in our template.
03:33
So we can just say page props and what do we call it? Toast. So that will now contain the flash message. So again, I'm going to console log on that.
03:43
And what we can actually do is not define this as a variable. We could directly do it in here like this if we want to. It's a little bit neater. OK, let's just try this out then.
03:52
So I'm going to go ahead and sign out. I'm going to sign in. And what we should see is when this page reload finishes and Inertia is redirected, that will pick up that body from the use page composable within the props.
04:04
And it should go ahead and dump that message out there. Great. So what we have now is the ability to just trigger a toast from anywhere or from this location.
04:16
So any kind of toast functionality you want to pull in, whether it's a third party package or in this case, we're going to build our own, this is where we're going to trigger it from using the body that we have. So that's basically it.
04:30
So now what we're going to do is we're going to build out our own very simple plugin to trigger this. And then over on the toast component, we can show this when it's been triggered. So how do we do this?
04:41
Well, we're going to go ahead and build out a composable of our own. So let's create a composables directory. And let's create our use toast.js. And again, from here, we're just going to export a object in here.
04:57
Now let's look at the basics of this. So what we want to be able to do is in here, go ahead and import this composable. So import use toast from, and that is in composables and use toast. And we want to be able to trigger this like this, passing the body in.
05:18
So let's go and build out a function in here that we export. So let's call this toast. And that's just going to be a standard function. And again, we'll just console log here.
05:30
So we'll just say toast triggered. And then we're going to go ahead and return this from this object. So we'll just return toast or return an object with the toast function in here. So now what we can do in here is extract out that toast functionality,
05:48
invoking our toast composable, which will give us that function. We can call it and accept the body in. So let's actually do that now. So we'll take the body in there.
05:57
And we'll output the body as well. So put in our own composable, which it exposes a function, invoke that function. And then that function will just console log that body out. So let's just try this out.
06:09
So again, I'm going to go ahead and sign out, sign back in. And let's see what happens. Sign in. And there we go.
06:17
Toast triggered. Welcome back, Alex. Now, we get toast triggered here with a null value just because this body over in here isn't always going to be available.
06:27
So we need to check if we actually have a body before we start to trigger this stuff out. So a good thing to do at this point would be to just wrap this in an if statement and just say if body. So if we actually have a flash message, then trigger it.
06:40
We don't want to trigger it otherwise. OK, so now that we've done this, over in our use toast, we can start to pull together some other things that we can extract, which will allow us to show this in that view component that we've built and give us the value of this.
06:55
So the first thing we want to work out is whether this is active or not. So I'm going to go ahead and import ref from view so we can create a reactive value in here. And we're going to call that active. So by default, that will be false.
07:08
So we can export that from here. So anywhere that we use our composable, we can check if it's active or not. Now, inside of this, when we trigger it, we're obviously not going to console log. We're going to change this over.
07:19
We can set the active value to true. And that means that wherever we use this composable, we can actually check whether this is active or not. So we'll leave that for now.
07:29
And we'll use that in just a second. But we want to work out how to kind of set this overall thing so we can actually extract the body out now. So why don't we go and create up here a toast options object.
07:41
And again, we can use ref for that. And that's going to contain the body that's going to get set when we trigger this. So down here, what we can do just above the active value is set the toast options value body to the body that we get sent through.
07:57
Now, what we can now do is expose the toast options entirely. Or we could just expose the body of this with the toast options body in here. Now, don't worry if this is confusing. Let's just sort of pull this together now that we've got the active state and the body
08:14
and see how this works in our actual toast component. So in here, what we can do is go ahead and import the use toast composable that we've built. And I'm just going to switch that over to our root.
08:26
And we can go ahead and extract this data out. So let's go and extract out the body. And let's go ahead and extract out whether this should be shown or not, or active in this case, as we called it.
08:39
So we'll extract that out from here. So the point of this composable is we can trigger this functionality from here. But because we have these two things up here, this is kind of like the state management for this, where we can access the state of it outside of this file.
08:52
So now what I can do is I can say v if active. And I can just show the body in here. So kind of like what we did before. But now we are triggering this rather than just checking the prop directly.
09:06
So it's a little bit better to have something like this. And of course, this means that we can sprinkle in functionality here, like adding a set time out to clear this after a certain amount of time. So let's head over and try this out.
09:19
I'm going to go ahead and sign out and sign back in. And let's see if this appears. So we'll quick click sign in here. And it doesn't look it does at the moment.
09:28
So let's have a look at what we're doing. If we head over to our toast component over here and just check this. So we're extracting that from use toast. We've got active there.
09:39
So that should be showing that body. So let's just switch over the body to something else. So we'll just say test. And let's see if that appears first of all.
09:52
So let's sign out, sign back in. And yeah, it does show test. It looks like it's a problem with showing this body. And yeah, so this is going to need to be a computed property.
10:04
So let's go and pull in computed here. And let's go ahead and use computed to just return that. Okay, great. So that should now show that.
10:16
Now it's computed and it's grabbing that up-to-date value. Let's try this again. And there we go. We get welcome back Alex.
10:23
So that is working nicely. So now the benefit of this is what we could do is we can set that time out. So for example, let's just make this really basic for now. There'll be a couple of things that we need to change here.
10:35
And let's just set this to two seconds. What we could do in here is now say toast options value body. And we could set that back to the default, which is an empty string. So now after two seconds, that is going to disappear.
10:50
And then over in our toast component, that is going to get rid of the body. Now it's also going to need to set active back to false. So it doesn't show that component, but basically just reset everything. So if we head over now and sign out, sign back in again,
11:06
what we'll find is that shows. And then after a couple of seconds, it will just disappear. So all that functionality is now tucked behind that. And all we're doing in our toast component is just referencing
11:18
everything we've exposed from this composable. OK, so now that we have done this, let's go and allow some options to be passed in, which will be really helpful in being able to change how we trigger this here. So for example, we might want to change the timeout length.
11:35
So let's set this to five seconds just to test this. These options need to merge into what we have here. So we want a kind of default timeout of two seconds. But then we want to override them in here.
11:47
So to do that, we're just going to go ahead and set toast options value to a new object. We're going to go ahead and spread out the existing toast options, but we're going to add in and override the options that we've passed in here. So we end up with the same object, but this will just replace the things that we want to change.
12:06
So although body probably shouldn't exist as part of toast options, it helps to keep everything in one object. OK, so now that we've done that and we are setting the body, overriding the options here, setting active value to true,
12:19
we can now switch out the toast options timeout in here. And now whatever we set here will be replaced and put into here. So we now, again, we're going to have to log out and log in. But let's just do this.
12:34
And we'll see that take five seconds rather than the default of two. But if we don't set a timeout, it will default to two seconds, which is great. OK, so there's a couple of issues with this. It's going to be really difficult to demonstrate this right now.
12:50
But if we were to perform an action like submit a form and say the users updated their account details, if we keep clicking this, it's going to keep setting a set timeout. So what we want to do at the top of here is just check if it's already active and then clear the timeout if that's the case.
13:07
So we're going to go ahead and say if it's already active. So if active value is true, then we want to clear this timeout. Now, we don't have a reference to this timeout at the moment because we're just doing a timeout in here.
13:19
So what we're going to do is at the top here outside of this is just go ahead and create an empty timeout value. We'll assign that here. And then at the top of here, if that timeout already exists, we can just clear that timeout
13:35
just to sort of reset it back. Otherwise, we're going to end up with this timeout clearing out the second toast that we make. So hopefully that makes sense.
13:43
We'll see this in action a little bit later. OK, so now that we have done this, we want a way to programmatically hide this. So what I'm going to do is just bump this up to 10 seconds. And we want to create a function in here which hides the toast.
14:00
So we can click on the toast to dismiss it. That's really important. So the first thing we want to do when we hide this is clear the interval. So let's go ahead and clear the timeout.
14:11
And then we're going to set the active value back to false. And we'll also reset the body as well. We could have an additional function which just clears this out since we have a little bit of duplication.
14:22
But it's not the end of the world. So we're going to go ahead and expose this function now. And what that means is over in our toast component, we can programmatically hide this by clicking something.
14:34
So I could say v on click and hide. So not only will this show with the body, but it will also allow us to click through to that function. And that function, obviously, if we just open this back up, is going to go ahead and clear
14:47
everything out for us. So let's try this out one more time. And then we'll go ahead and style this up in the next episode. So let's go ahead and sign in again.
14:56
And now we get the toast shown just up here. But when I click it, it disappears and everything is reset. So that is our basic plugin and our toast functionality in a composable which we can use anywhere.
15:09
So we can display a toast message like this, but using some sort of common functionality rather than just listening to a prop, which doesn't really make too much sense. Because this gives us the ability to programmatically hide it and obviously do anything we like, like pass options through.
15:26
So I'm going to go over to our toast here. I'm going to switch this back to five seconds. And in the next episode, we are going to style up this toast so it looks a little bit nicer and has a nice transition.

Episode summary

In this episode, we're diving into building a toast notification plugin for our app. We start by discussing the limitations of simply checking for a toast message in template props, and why it's better to integrate this functionality as a plugin—one that leverages Inertia's lifecycle hooks. This makes our toast system more flexible and easily swappable, even allowing us to change out our implementation for a third-party plugin later on if we want.

We go step-by-step through making a new plugin, registering it, and hooking into Inertia's router events (like when a page finishes loading) to know exactly when to trigger a toast. With our plugin infrastructure in place, we create a new composable (useToast) that acts as a little state manager for toast messages—handling when the toast is active, what message it should display, and any options we want to pass (like the timeout duration).

You'll see how to trigger toasts anywhere in your app, and how our component can now reactively show or hide itself based on that shared state. We also add a feature to auto-hide toast messages after a set time, pass custom options, and allow users to dismiss the toast manually by clicking on it.

By the end, we have a basic, reusable, and easily extendable toast plugin hooked up and ready for styling. In the next episode, we'll focus on making it look great and adding smooth transitions. So now our toast messages are in a much better place—flexible, programmatic, and ready to be customized!

Episode discussion

No comments, yet. Be the first!