Ready to get started?

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

robot mascot smiling

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.

Published
Oct 02, 24
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

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

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 The Discussion! (10 Comments)

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

  1. Commented 3 months 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. Commented 3 months 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. Commented 3 months 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. Commented 3 months 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. Commented 3 months ago

            Perfect! I will definitely use the reflash().

            1

            Please sign in or sign up for free to reply

  2. Commented 1 month ago

    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)?

    1

    Please sign in or sign up for free to reply

    1. Commented 1 month ago

      Nevermind, found a repo, problem solved.

      1

      Please sign in or sign up for free to reply

    2. Commented 1 month ago

      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 our AppLayout and AuthLayout, 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.

      0

      Please sign in or sign up for free to reply

      1. Commented 1 month ago

        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?

        1

        Please sign in or sign up for free to reply

        1. Commented 1 month ago

          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.

          0

          Please sign in or sign up for free to reply