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
20. Hooking back into forms for flash messages

Episodes

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

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.
28 episodes•2 hrs 20 mins

Overview

Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.

Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.

To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!