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.