Flexible Flash Notifications with Inertia
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
In this course, we're going to cover a system for really, really flexible notifications in Inertia. So first of all, let's take a look at how this works and have a little peek of what's going on behind the scenes.
00:13
So you can see I've got a really simple page here. I've installed Laravel Breeze with Inertia support and this page here is being rendered, of course, in Inertia. So I have a button here, doesn't look like a button, but it is. This is actually submitting a form through to a page just over here.
00:29
So this is the form itself. We just have a really, really simple form post. We're not sending any data through here, but of course you can. And this is going through to this something route. If we just take a look at this, you can see that this is a post route and it does something.
00:46
Of course, we're not doing anything here because we're just focusing on the notifications, but it's returning back with success. It's flashing this success variable in the session and just has some data in here. So that's what's happening. This is pretty much typically what you would do within a normal blade application.
01:04
And you would pick this up using the session helper and you would flash the message. But with Laravel, it's a little bit more complex. So, of course, we're going to dive into that in the course. So I'm going to go ahead and click on this.
01:15
That has submitted that form, redirected us back. The data has come through and it shows us a nice success message just here. Now, we're not quite going to stop there. What we're going to do is allow this very, very easily to take in any of these types of message.
01:32
So let's say that failed nicely and change this over to error. Now, we're not catching every single type of error here. What we're doing is we're allowing anything to be passed in as this key just here. And depending on the library that you're using on the client side, we're going to be using a very specific one in this course.
01:51
That's just going to send that through and show that message regardless of what we send through. So I've only declared this once, but I can choose any type of thing. In this case, I'm going to choose a warning and that will just automatically update. So basically, this is a kind of code this up and leave it type of thing where you'll build the functionality into your app.
02:12
And then you'll just go ahead and have the ability to pass in any type of error or message here and it will work really nicely. Now, of course, there are limitations to this. You could make it a little bit more fancy. We're only including a string here.
02:25
But once you're done with the course, you can go ahead and add on to this as you need. So that's how it works. And we're going to go ahead and build out all of this functionality in the course. So let's get started.

Episode summary

Welcome to the course! In this introductory episode, we take a look at the flexible notifications system we'll be building for Inertia.js applications using Laravel.

First, we start off with a quick demo to show you how the notifications work. There's a simple page (built with Laravel Breeze and Inertia) that has a form triggering different types of notifications—like success, error, and warning messages—directly from the backend to the frontend.

You’ll see how a backend action can set any message type, and on the frontend, it instantly shows the right notification. The great part is this setup lets you flash messages dynamically without a ton of extra code. You can use any message type you want—success, error, warning, or something else—and the system will handle it seamlessly.

We’ll build all this from scratch, and by the end, you’ll know how to add, customize, and extend your own flexible notifications, perfect for any Laravel + Inertia project. Let’s jump right in!

Episode discussion

No comments, yet. Be the first!