Laravel Blade views, Alpine.js, Vue.js integration, TailwindCSS styling, Vite assets. ALWAYS activate when: working with resources/views/, Blade components, frontend forms, UI elements, modals, dropdowns, forms. Triggers on: görünmüyor, gösterilmiyor, sayfa yüklenmiyor, sayfa açılmıyor, form çalışmıyor, form gönderilmiyor, buton çalışmıyor, button not working, style bozuk, CSS bozuk, renk yanlış, color wrong, responsive bozuk, mobile görünüm, dark mode çalışmıyor, layout bozuk, component çalışmıyor, modal açılmıyor, dropdown çalışmıyor, asset yüklenmiyor, image not loading, JS error, JavaScript hatası.
Blade + Alpine.js + Vue.js + TailwindCSS development for Laravel 12+.
| Layer | Technology | Purpose |
|---|---|---|
| Views | Blade | Server-rendered templates |
| Interactivity | Alpine.js | Lightweight JS framework |
| SPA (optional) | Vue.js | Complex client-side apps |
| Styling | TailwindCSS v4 | Utility-first CSS |
| Assets | Vite | Build tool |
{{-- resources/views/components/button.blade.php --}}
@props([
'type' => 'button',
'variant' => 'primary',
])
<button
type="{{ $type }}"
{{ $attributes->class([
'px-4 py-2 rounded-lg font-medium transition-colors',
'bg-blue-600 text-white hover:bg-blue-700' => $variant === 'primary',
'bg-gray-200 text-gray-800 hover:bg-gray-300' => $variant === 'secondary',
'bg-red-600 text-white hover:bg-red-700' => $variant === 'danger',
]) }}
>
{{ $slot }}
</button>
{{-- Usage --}}
<x-button variant="primary">Save</x-button>
<x-button variant="danger" type="submit">Delete</x-button>
<?php
namespace App\View\Components;
use Illuminate\View\Component;
use Illuminate\View\View;
final class Alert extends Component
{
public function __construct(
public string $type = 'info',
public ?string $title = null,
) {}
public function render(): View
{
return view('components.alert');
}
public function iconClass(): string
{
return match($this->type) {
'success' => 'text-green-500',
'error' => 'text-red-500',
'warning' => 'text-yellow-500',
default => 'text-blue-500',
};
}
}
{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=d...