Skip to main content
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

Style

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

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:

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: