blade

UI — Blade + Alpine + Tailwind

Stack

• Blade (resources/views/)
• Alpine.js 3.4 (state local)
• Tailwind 3.1 (utility-first)
• SweetAlert2 (modales / confirmaciones)
• Swiper (carousels)
• Vite 7.1 (dev/build)

Componentes Blade

• Crear componentes en resources/views/components/.
• Anonymous components para UI sencilla (sin clase PHP).
• Class-based components cuando hay lógica de presentación o defaults complejos.
• Slots con nombre para layouts: <x-slot:header>, <x-slot:actions>.

<x-card>
    <x-slot:header>Cotización #{{ $quote->id }}</x-slot:header>
    {{-- contenido --}}
</x-card>

Alpine.js

• x-data con state local del componente. Evitar tiendas globales.
• Inicializar listas/objetos en x-data, no in-line en eventos.
• Eventos personalizados con $dispatch y escuchar con @event-name.window.
• No mezclar Alpine con jQuery (este repo no usa jQuery, no introducirlo).

<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open" x-transition>...</div>
</div>

Tailwind

• Utility-first siempre. Componentes solo si la clase se repite >5 veces.
• Responsive con sm: md: lg: xl:. Mobile-first.
• Colores por marca tomar de Partner (site_primary_color, etc.) cuando la vista es del sitio del partner.
• Configurar nuevas clases en tailwind.config.js, no <style> inline.

Formularios

• @csrf siempre en POST/PUT/DELETE (Blade lo agrega con @method).
• Mostrar errores con @error('campo') debajo del input.
• Old values con value="{{ old('campo') }}".
• Validación se queda en FormRequest (ver skill laravel).

SweetAlert2 — confirmaciones

<button onclick="confirmDelete({{ $item->id }})">Eliminar</button>
<script>
function confirmDelete(id) {
    Swal.fire({
        title: '¿Eliminar?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then(r => {
        if (r.isConfirmed) document.getElementById('form-delete-' + id).submit();
    });
}
</script>

Cache busting

Assets estáticos referenciados directamente DEBEN llevar versión:

<script src="{{ asset('js/custom.js') }}?v={{ filemtime(public_path('js/custom.js')) }}"></script>
<link rel="stylesheet" href="{{ asset('css/custom.css') }}?v={{ filemtime(public_path('css/custom.css')) }}">

Para assets de Vite usar @vite directiva (ya maneja hash automáticamente).

Anti-patrones

• ❌ Lógica de negocio en Blade (@php $total = $items->sum(...) @endphp) — calcular en controller/service.
• ❌ Loops anidados pesados en vista — preparar el array en el controller.
• ❌ jQuery en código nuevo.
• ❌ Estado de Alpine global; usar dispatch/eventos en su lugar.
• ❌ CSS inline (style="...") salvo colores dinámicos del partner.

Layouts

• Layout principal en resources/views/layouts/.
• Header/footer extraídos a componentes para reutilización.
• Vista de partner site usa branding del modelo Partner (logo, hero, colores).