- What is Wiretoast and how does it work with Laravel and Livewire?
- Wiretoast is a framework-agnostic toast notification package for Laravel, Livewire and Alpine. It consists of a single Blade component, a small vanilla JS/Alpine runtime, and pure CSS themes, so it adds no database tables, queues, server-side state, or third-party JavaScript dependencies. You drop the component into your layout once, then trigger toasts from Livewire via $this->notify(), from Alpine or Livewire with a notify event, or from plain JavaScript with window.notify().
- How do I install Wiretoast in a Laravel app?
- Install it with composer require edulazaro/wiretoast, which requires PHP 8.2 or newer and Laravel 11 or newer. Then load the CSS and JS either by importing them into your Vite entrypoints or by publishing the assets to public/vendor/wiretoast with php artisan vendor:publish --tag=wiretoast-assets. Finally, place the x-wiretoast Blade component once in your main layout so the toast container is rendered.
- Should I bundle Wiretoast assets with Vite or use vendor:publish?
- Bundling with Vite is the recommended path: import the JS and CSS from vendor/edulazaro/wiretoast/resources into app.js and app.css so everything is minified, hashed, and served in a single request with your existing cache busting. The vendor:publish route copies files into public/vendor/wiretoast and requires passing :assets="true" to the component, which injects link and script tags at runtime. Be aware of two caveats: the Vite path requires the vendor directory to exist at asset build time, which can break split-stage Docker or CI pipelines, and the injected tag path can be silently blocked by a strict Content-Security-Policy without nonce support.
- Which Laravel and Livewire versions does Wiretoast support?
- Wiretoast requires PHP 8.2 or higher and Laravel 11.0 or higher. Its Composer constraint is open-ended, so it will install into future Laravel releases such as 12, 13, or 14 without any compatibility testing having been done, which shifts the upgrade-gate burden onto your team. Livewire 3.0 or newer is optional and only needed for the $this->notify() helper; the toast system itself works without Livewire.
- How do I show a toast notification from Livewire or plain JavaScript?
- There are three supported call sites: the $this->notify() helper inside a Livewire component, $dispatch('notify', {...}) from Alpine or Livewire, and window.notify() from any vanilla JavaScript. All three accept the same small options object covering the message, optional title, type, position, and duration. The API surface is deliberately tiny, with a fixed set of 5 types and 7 positions, so there is very little to learn or misconfigure.
- Can I customize Wiretoast themes with CSS variables?
- Yes. Wiretoast ships 11 bundled themes including flat, soft, glass, gradient, neon, minimal, claude, chatgpt, synthwave, megaflow, and brutalist, all written in pure CSS with no Tailwind or Bootstrap dependency. You can define a custom theme entirely through CSS custom properties in the --wt-* namespace, so no Blade view overriding is needed. Keep in mind that adopting these variables means maintaining a second styling vocabulary alongside your existing design tokens, which is a design-system governance decision rather than just a library choice.
- Does Wiretoast support dark mode, progress bars, and grouped toasts?
- Yes. Dark mode works automatically through prefers-color-scheme and can also be forced with a .dark class or the data-wt-theme-mode="dark" attribute. You can enable an auto-dismiss progress bar that pauses on hover, show an optional title alongside the message, and use group mode to collapse multiple messages of the same type into a single toast. Toasts stack across 7 positions, from top-left through center to bottom-right.
- Is Wiretoast accessible and safe from XSS in toast messages?
- Accessibility is not documented: the README makes no claim about role="status", aria-live, aria-atomic, or focus handling, so you should inspect the actual rendered DOM before repeating any WCAG compliance claim internally. For XSS, confirm that messages are inserted with textContent rather than innerHTML, since toast messages often carry user-supplied or exception-derived strings. Both checks are quick to perform during a short spike and should be treated as gating criteria.
- Will Wiretoast's notify event collide with my own events or window.notify?
- The JavaScript contract uses the unprefixed event name notify via $dispatch('notify', ...) and an unprefixed window.notify global. Any other package or application code dispatching a notify event, or a Livewire component firing an event named notify, can cross-trigger toasts or be triggered by them. Verify whether the event name is configurable in your version and treat window.notify as a potential global clobber before adopting.
- Is Wiretoast actively maintained and safe for production?
- The code risk is low: a few hundred lines of readable, dependency-free MIT-licensed CSS and JS with no build step, trivially forkable if the maintainer disappears. The supplier risk is higher, since it has a single maintainer, very few GitHub stars, no visible test suite, CI, security policy, or contribution guide, and a release history that reads as a hobby project. Realistically the exposure is not that it breaks production, but that your team becomes the only party maintaining it within a year, so run a one to two day spike in a non-critical app and be prepared to vendor or replace it.