--- name: laravel-fullstack description: "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ı." --- # Laravel Fullstack Blade + Alpine.js + Vue.js + TailwindCSS development for Laravel 12+. ## Stack Overview | 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 | ## Blade Components ### Anonymous Components ```blade {{-- resources/views/components/button.blade.php --}} @props([ 'type' => 'button', 'variant' => 'primary', ]) {{-- Usage --}} Save Delete ``` ### Class Components ```php type) { 'success' => 'text-green-500', 'error' => 'text-red-500', 'warning' => 'text-yellow-500', default => 'text-blue-500', }; } } ``` ### Layouts ```blade {{-- resources/views/layouts/app.blade.php --}} {{ $title ?? config('app.name') }} @vite(['resources/css/app.css', 'resources/js/app.js'])

Welcome

``` ## Alpine.js Patterns ### Basic Toggle ```blade

Menu content

``` ### Dropdown ```blade

Edit Delete

``` ### Modal ```blade

Modal Title

Modal content here

``` ### Form with Loading State ```blade ``` ## References | Topic | Reference | When to Load | |-------|-----------|--------------| | Blade advanced | [references/blade.md](references/blade.md) | Slots, stacks, includes | | Alpine.js patterns | [references/alpine.md](references/alpine.md) | Complex interactions | ## TailwindCSS v4 Quick Reference ```css /* resources/css/app.css */ @import "tailwindcss"; @theme { --color-primary: #3b82f6; --color-secondary: #6b7280; } ``` ```blade {{-- Dark mode --}}