This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
20. Hooking back into forms for flash messages

Transcript

00:00
Over the next few episodes, we're going to look at showing a message when the user successfully makes a post. We're going to start with the most basic and that is hooking into the form. It's pretty much what we've already seen, but we'll see how this comes together. And then we'll move into flashing messages to share data and watching for that on the client side.
00:21
And finally, we'll end up with building our own plugin, which will handle global messages being flashed from anywhere in our app. So we're going to start by pulling in a library to show a message. We're going to use view toastification here,
00:35
but it doesn't matter what front end library you're using to actually show messages. It could be absolutely anything. So let's go ahead and pull this package in. Let's go down.
00:45
It looks like this just to give you a little demo. And let's go down to the installation section. Go ahead and do an npm install on this and get this pulled in. So while that's finishing, we're going to come over to app.js.
00:58
So at the top, we're going to pull in the styles for this. Let's import these up here. And let's go ahead and import toast from view toastification down here. And then down here, we're going to go ahead and use that toast plugin.
01:17
And that should be good. OK, so now that we have pulled this package in, let's just take a really quick look at how we can get this working in the most basic way possible. So over in our index file where we are creating the post by posting our form through,
01:34
we know that we can do anything within this on success callback. At the moment, we're just resetting our form, but this gives us an opportunity to show a message when something happens. So just at the top here, we're going to go ahead and import
01:50
use toast from view toastification. And we're going to go ahead and do pretty much what we did down here with our page. Use that composable. And now we can just invoke this toast function wherever we need to show a message.
02:07
And that's going to be when this was successfully submitted through. So we're going to say comment posted, and that should work nicely. So let's go ahead and say hello, hit post. And there we go.
02:21
We get a very simple message up here. Now, this solution is OK, but if you think about it, every single form that you create now, you're going to have to manually invoke toast. You're going to have to pass through a message, which is now defined within your client.
02:37
And really, if we think about a Laravel application, if we come over to the comment store controller, what you might be used to be doing is something like with message and then saying it within your back end.
02:50
That also means that you can easily translate this text as well. So by doing that, it's a little bit more convenient. So in the next episode, we're going to go ahead and revisit shared data so we can actually do something like this.

Episode summary

In this episode, we kick off a mini-series focused on showing messages to users after they've successfully submitted a form. We start with the simplest approach—directly hooking into our form submission and displaying a toast message when a post is made.

First, we install the popular vue-toastification package (but you can use any frontend library you like for showing messages). After installing, we walk through importing the necessary styles and setting up the toast plugin in our app.js, making it available throughout our app.

Then, over in our form where a user creates a new post, we update the onSuccess callback—which previously only reset the form—to also trigger a simple 'comment posted' toast notification. This gives immediate feedback to the user that their comment was published.

However, we also discuss some of the downsides of this approach: namely, having to manually add toast notifications every time we create a new form, and the fact that messages are only defined on the client side.

To wrap up, we introduce the idea of handling flash messages more globally and conveniently (like you might do in Laravel), setting the stage for the next episode where we'll look at a better way to share and display these messages using backend data.

Episode discussion

No comments, yet. Be the first!