Chapters
00:00 - What Is A Toast Message?
01:05 - Installing the Shadcn-Vue Sonner Component
01:40 - Our First Toast Message
04:02 - Flashing Messages from AdonisJS
07:50 - Displaying Flash Messages from AdonisJS
12:40 - Testing Out Our Flash Message Manager
AI Lesson Overview
Toast messages are a fantastic way to provide users with quick feedback without disrupting their workflow. This tutorial shows you how to integrate them into your application using Shadcn-Vue and Vue-Sonner.
What are Toast Messages?
Join The Discussion! (10 Comments)
Please sign in or sign up for free to join in on the dicussion.
davidtazy
Hello,
Sorry if you covered this point in another lesson, but:
Once the
POST /register
route is fully implemented, shouldsession.flash('success', …)
work?In my case, it doesn't. When I
console.log
the shared data for the messages field inconfig/inertia.ts
, it’s empty.On the other hand, the
session.flash
in thePOST /login
route is working as expected.Can you tell me if it should work and if I just have a bug in my codebase? If this is expected behavior, could you give me some hints to understand the use case?
And thanks for the awesome work. All these lessons have finally convinced me to learn AdonisJS!
Please sign in or sign up for free to reply
tomgobich
Hi davidtazy!
Yeah, the toast system should be fully working by the end of this lesson. And, in fact, In lesson 5.2 Logging Out Users, we add in a
session.flash('success' Welcome to PlotMyCourse')
after successfully registering the user.Are you redirecting the user after registering them? Flash messages are made available for the next request and won't be applied to the current, so the redirect does serve a purpose here.
Here is the final RegisterController's Store method.
If you'd like & are able, feel free to share a link to the repo and I can see if anything stands out.
Also, that's awesome to hear! I hope you enjoy AdonisJS and thank you for joining Adocasts Plus!! 😁
Please sign in or sign up for free to reply
davidtazy
Thanks to your reply, I understand why it wasn't working.
In
register.store
, I was redirecting to 'home', but I have middleware that redirects to the 'family.show' route when a user connects for the first time to "jail" him until he fill in the minimal required information.So I suppose this redirection is consuming the flash message?
To fix it,
register.store
redirects to 'family.show' -> my custom middleware does not interfere -> the flash message appears.Thank you very much!!!
Please sign in or sign up for free to reply
tomgobich
Anytime! Awesome, I'm happy to hear you were able to track it down and get it all fixed up! 😊 Another alternative, if applicable to your use-case, is to reflash any messages. This will push the flash messages forward with a secondary redirection.
Flash → redirect
home
→ reflash & redirectfamily.show
Please sign in or sign up for free to reply
davidtazy
Perfect! I will definitely use the reflash().
Please sign in or sign up for free to reply
pavlo-sheiman
How do you handle re-rendering? If you put toast-manager into component tree which will change (i.e. due to navigation), toasts will flash and disappear. How to put it into persistent component tree (i.e. above the page component)?
Please sign in or sign up for free to reply
pavlo-sheiman
Nevermind, found a repo, problem solved.
Please sign in or sign up for free to reply
tomgobich
Hi Pavlo! In Inertia, the built-in layout layer is positioned above the page component. This means that the instance of the layout component persists across page changes, as long as the page is linked to using Inertia’s Link component.
Since we're using the built-in layout layer in Inertia & our
ToastManager
lives within ourAppLayout
andAuthLayout
, we're achieving exactly that. The only exception would be if we switch between those layouts - in which case you could use nested layouts to resolve that if needed.Please sign in or sign up for free to reply
pavlo-sheiman
Yeah. In my app I wasn't using persisting layouts and was just wrapping my pages into layout components, so this is where problem was. Checked your code and switched to persistent layouts - so far so good. Thanks for the course and prompt reply!
p.s. by any chance you have a course on integrating tansatck table (or something similar) with backend pagination, sorting and filtering?
Please sign in or sign up for free to reply
tomgobich
Awesome, happy to hear you were able to get it working! Anytime!
I have a few lessons on pagination (linked below), but nothing to that extent at present, unfortunately. I debated on whether to include a table with pagination, sorting, and filtering in this series but opted against it due to the series already being lengthy. I'm thinking I might do that as an aside series though.
How to paginate filtered query results
Persist filters easily with Lucid's query string method
Paginated Admin Movie Table
Please sign in or sign up for free to reply