Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join for $8.00/mo Sign in
robot mascot smiling
Previous
Sign Up to Track Progress
Next

Creating A Toast Message Manager

Learn how to implement a user feedback manager in your app using toast messages and vue-sonner. We'll integrate our flash message manager with state provided from AdonisJS' flash messages store to display success and error messages.

Tom Gobich
Author
Tom Gobich
Published
Oct 02
Duration
15m 7s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Visit Website

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?

Ready to get started?

Join Adocasts Plus for $8.00/mo, or sign into your account to get access to all of our lessons.

Join for $8.00/mo Sign in

Join The Discussion! (5 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. davidtazy
    Commented 25 days ago

    Hello,
    Sorry if you covered this point in another lesson, but:

    Once the POST /register route is fully implemented, should session.flash('success', …) work?

    In my case, it doesn't. When I console.log the shared data for the messages field in config/inertia.ts, it’s empty.

    On the other hand, the session.flash in the POST /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!

    1

    Please sign in or sign up for free to reply

    1. tomgobich
      Adocasts Plus Subscriber
      Commented 25 days ago

      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.

      @inject()
async store({ request, response, session }: HttpContext, webRegister: WebRegister) {
  const data = await request.validateUsing(registerValidator)

  // register the user
  await webRegister.handle({ data })

  session.flash('success', 'Welcome to PlotMyCourse')

  return response.redirect().toRoute('organizations.create')
}
      
  
      
    
      
      Copied!

      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!! 😁

      1

      Please sign in or sign up for free to reply

      1. davidtazy
        Commented 23 days ago

        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.

        export default class UserHasFamilyMiddleware {
  async handle({ auth, response }: HttpContext, next: NextFn) {
    if (auth.user && auth.user.hasNoFamily()) {
      return response.redirect().toRoute('family.show')
    }
    return next()
  }
}
        
  
        
    
        
      Copied!

        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!!!

        1

        Please sign in or sign up for free to reply

        1. tomgobich
          Adocasts Plus Subscriber
          Commented 22 days ago

          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 & redirect family.show

          export default class UserHasFamilyMiddleware {
  async handle({ auth, response, session }: HttpContext, next: NextFn) {
    if (auth.user && auth.user.hasNoFamily()) {
      session.reflash()
      return response.redirect().toRoute('family.show')
    }
    return next()
  }
}
          
  
          
    
          
      Copied!
          1

          Please sign in or sign up for free to reply

          1. davidtazy
            Commented 22 days ago

            Perfect! I will definitely use the reflash().

            1

            Please sign in or sign up for free to reply