resources/js/Components/FlashMessage.vue

Package: vue-sonner.
Shadcn-vue Sonner component: https://www.shadcn-vue.com/docs/components/sonner.html

This component is already included in all major layouts so you don’t need to do anything. It just works.

​
Types

  • default
  • success
  • info
  • warning
  • error
return back()->with([
    'status' => __('User has been created.'), // Toast title
    'status_description' => "Tony Stark ([email protected])", // Toast description
    'status_type' => ResponseStatus::Success, // Toast status
]);

​
Style

You can style toast messages however you like. Just go to the component files (FlashMessage and Sonner) and make the udpates.

<Toaster position="bottom-right" offset="1rem" :duration="6000" />

​
Duration

Duration of the toast message in milliseconds.

​
Position

  • top-left
  • top-center
  • top-right
  • bottom-left
  • bottom-center
  • bottom-right

​
Offset

Offset from the edges of the screen.

​
Close button

By default, there is no close button. You can add close button like this:

<Toaster position="bottom-right" offset="1rem" :duration="6000" close-button />

​
Colors

By default, every toast message will be in same colors, distinctive by status icons.

To display each message in different color, according to the current status, use this:

<Toaster position="bottom-right" offset="1rem" :duration="6000" rich-colors />