Wirecookies
Wirecookies is a cookie consent banner and preferences modal for Laravel. It is pure CSS, no Tailwind, tracks nothing of its own, and reads the same --wire-* theme tokens as wiremodal and wiretoast so it matches the rest of your UI.
Installation
composer require edulazaro/wirecookies
The service provider is auto-discovered. Wirecookies leans on wiremodal for the preferences modal and the shared theme tokens, so edulazaro/wiremodal is pulled in automatically.
Wirecookies ships a single stylesheet and no JavaScript of its own: it relies on Alpine (already present with Livewire) and on wiremodal's JS.
Import the stylesheet after a wire* base that defines the theme variables:
/* resources/css/app.css */
@import '../../vendor/edulazaro/wiremodal/resources/css/wiremodal.css';
@import '../../vendor/edulazaro/wirecookies/resources/css/wirecookies.css';
Then bundle wiremodal's JS, which is what opens and closes the preferences modal:
// resources/js/app.js
import '../../vendor/edulazaro/wiremodal/resources/js/wiremodal.js';
To own and edit the CSS directly, publish it and import your copy instead:
php artisan vendor:publish --tag=wirecookies-css
# -> resources/css/vendor/wirecookies.css
Usage
One Blade tag, dropped once near the end of your layout:
<x-wirecookies :policy-url="route('cookies')" />
That single tag renders both surfaces: the bottom banner a first-time visitor sees, and the accessible preferences modal behind the Configure button. Once a visitor makes a choice the banner is replaced by a small floating button that reopens the modal.
policy-url accepts a single string, or an array keyed by locale:
<x-wirecookies :policy-url="['es' => '/cookies', 'en' => '/en/cookies']" />
Pass null or leave it out and the policy link does not render.
Theming
Every color, border and radius is wired to the --wire-* family variables. Set one attribute on a parent and the banner, the modal and your toasts all follow:
<html data-wire-theme="studio">
| Theme | Look |
|---|---|
studio |
Sharp and grey |
claude |
Warmer |
brutalist |
Hard edges, heavy borders |
neon |
Dark and electric |
With no data-wire-theme set at all, Wirecookies falls back to its own clean light defaults, so it looks right standing alone.
Copy and translations
Every string resolves from translations by default (Spanish and English ship in the box, following app()->getLocale()) and any of them can be overridden at render time with a prop.
<x-wirecookies
:policy-url="route('cookies')"
title="We use cookies"
accept-all="Sound good"
reject-all="No thanks"
configure="Let me choose"
/>
The same pattern works for description, save-preferences, reject-optional, modal-title, always-active and the rest. Pass a prop to override that one string; leave it out and it comes from the translation file.
Persistence
There is no facade, no methods and no table. When a visitor saves, Wirecookies writes a plain object under a localStorage key (cookie-preferences by default):
{ essential: true, analytics: false, marketing: false, functional: false }
It fires a wirecookies-saved event so anything on the page can react.
built and maintained by Edu Lazaro · MIT license