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
05. Using a package to show notifications

Episodes

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

Transcript

00:00
So it's time to actually show these notifications on the page. And we're going to be using the Vue Toastification package for this. It doesn't matter what package you're using. Feel free to choose anything.
00:09
It's pretty much going to work in the same way. But I really like this one. So let's go ahead and install this. I'm not going to go through the docs.
00:17
There are tons of things that you can customize with this. There's loads of functionality. But we're going to do a very simple NPM install save on Vue Toastification and next because we're working with Vue 3.
00:28
If for any reason you're working with Vue 2, then you'll want to put in the version 1 of this package. Okay. So now that we've got this pulled in, let's get this set up.
00:36
So we're going to do this over in resources.js and app.js, which we've already been into. And the first thing that we're going to do is pull in the styles for this package just at the top.
00:46
So this is Vue Toastification. And we're going to go into dist and I think it's index.css. So index.css. That should be okay.
00:55
Let's just check our build. Yeah. So we'll fix this up if it's not. And we want to pull in the toast package or the toast component
01:04
plugin from Vue Toastification just inside of here. Great. So we can use this like we have with our own plugin inside of here. And now we have toast installed and hopefully ready to go.
01:17
So let's go ahead and try this out over in our notifications plugin. Now to do this, we have another composable, which is really nice, but this is use toast and that comes from Vue Toastification. And then in here we can go ahead and use that.
01:30
So I'm actually going to define it out here first of all, so it's a little bit easier to use. And we just invoke use toast and we can then just use this function here, this toast function to flash a notification.
01:43
So in our case, we're just going to say toast. And I believe the first thing is the actual body of the notification. So let's just pass in the notification, because remember this is going to be a string into toast and we're good to go, hopefully good to go.
01:58
So let's just try this out. Let's hit do something. And yeah, there we go. We get an info by default and we get the text that we
02:05
defined for our notification. As we should know by now, if we change this out at all, so that failed, it's going to just work in exactly the same way. Of course, we need to address the issue with the fact that this is by default
02:21
an info rather than a success or an error or really anything we want it to be within here, but we're going to get to that very shortly. So ideally what we want to do is get to the point where we can toast this, but also pass in a type.
02:36
So for example, error. And let's go over and yeah, that doesn't work. I think we, yeah, we obviously need to define this as a list of options. So type is going to be error here.
02:49
And let's just try that out. And there we go. We get an error. So really the last thing to do now that we've got this globally set up and actually
02:56
flashing this notification from any route that we create without having to write any more code is get this to detect the type from this here, and then go ahead and show the appropriate type inside of here. Let's handle that in the next episode.

Episode summary

In this episode, we dive into actually displaying notifications in our Vue app using the popular Vue Toastification package. First, we chat about why we're going with this specific package and how you can use any other notification package if you prefer—most will have a pretty similar setup.

We walk through the installation process using NPM and quickly touch on the version differences if you're working with Vue 2 vs. Vue 3. Then, we get into importing and setting up the Toastification styles, so everything looks as it should.

Once that's sorted, we integrate the toast plugin and show how to use its useToast composable inside our own notifications plugin. We demonstrate triggering a notification and see it pop up in the browser—super satisfying!

Finally, we experiment with showing different types of notifications, like "info" and "error." We note that right now the type defaults to "info", and we wrap up by pointing out that in the next episode, we'll work on automatically detecting and displaying the correct notification type. So, now we've got global, plug-and-play toasts in our app!

Episode discussion

No comments, yet. Be the first!