Add toast messages in Laravel with Wiretoast
Fire toast notifications in Laravel from PHP, Alpine and plain JavaScript with one notify call, plus positioning, auto-dismiss and grouping, and no CSS framework in your bundle Here is a problem I hit on every project. A Livewire action finishes and I need to tell the user it worked, but the toast library I grabbed assumes Tailwind, or ships its own huge runtime, or only works from JavaScript…
Laravel developers can fire toast notifications from PHP, Alpine, and plain JavaScript using a single notify call with Wiretoast. This library eliminates the need for a CSS framework and works seamlessly with Vite. To install Wiretoast, start by importing the package CSS and JS into your entry files using Vite. Next, add the Wiretoast component to your layout once, which will not inject any extra tags into your project.
Use the $this->notify() helper in a Livewire component to display a toast notification after a successful action. The notify() method accepts a message and a type (success, error, warning, info, or neutral) as its first two arguments. You can also pass an options object as the third argument to customize the toast's position, timeout, and progress.
Wiretoast supports seven positioning options and offers a progress feature that draws a countdown bar. To group identical toasts and avoid noise, set the group property to true. For Laravel 5.4+, you can use the :true shorthand to achieve the same result. Switching themes is straightforward by using the theme prop, which comes with eleven bundled styles.
Dark mode is automatically enabled through prefers-color-scheme, but you can force a mode using the mode prop. Be cautious not to mix the Vite installation path with the published assets, as this can cause duplicated loading of resources.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
