Laravel Blade
Agent Workflow (MANDATORY)
Before ANY implementation, launch in parallel:
- fuse-ai-pilot:explore-codebase - Check existing views, components structure
- fuse-ai-pilot:research-expert - Verify latest Blade docs via Context7
- mcp__context7__query-docs - Query specific patterns (components, slots)
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
Blade is Laravel's templating engine. It provides a clean syntax for PHP in views while compiling to pure PHP for performance.
| Component Type |
When to Use |
| Anonymous |
Simple UI, no logic needed |
| Class-based |
Dependency injection, complex logic |
| Layout |
Page structure, reusable shells |
| Dynamic |
Runtime component selection |
Critical Rules
- Always escape output - Use
{{ }} not {!! !!} unless absolutely necessary
- Use @props - Declare expected props explicitly
- Merge attributes - Allow class/attribute overrides with
$attributes->merge()
- Prefer anonymous - Use class components only when logic is needed
- Use named slots - For complex layouts with multiple content areas
- CSRF in forms - Always include
@csrf in forms
Decision Guide
Component Type Selection
Need dependency injection?
├── YES → Class-based component
└── NO → Anonymous component
│
Need complex props logic?
├── YES → Class-based component
└── NO → Anonymous component
Layout Strategy
Simple page structure?
├── YES → Component layout (<x-layout>)
└── NO → Need fine-grained sections?
├── YES → @extends/@section
└── NO → Component layout
Key Concepts
| Concept |
Description |
Reference |
| @props |
Declare component properties |
components.md |
| $attributes |
Pass-through HTML attributes |
slots-attributes.md |
| x-slot |
Named content areas |
slots-attributes.md |
| @yield/@section |
Traditional layout inheritance |
layouts.md |
| $loop |
Loop iteration info |
directives.md |
Reference Guide
Concepts (WHY & Architecture)
| Topic |
Reference |
When to Consult |
| Components |
components.md |
Class vs anonymous, namespacing |
| Slots & Attributes |
slots-attributes.md |
Data flow, $attributes bag |
| Layouts |
layouts.md |
Page structure, inheritance |
| Directives |
directives.md |
@if, @foreach, @auth, @can |
| Security |
security.md |
XSS, CSRF, escaping |
| Vite |
vite.md |
Asset bundling |
| Advanced Directives |
advanced-directives.md |
@once, @use, @inject, @switch, stacks |
| Custom Directives |
custom-directives.md |
Blade::if, Blade::directive |
| Advanced Components |
advanced-components.md |
@aware, shouldRender, index |
| Forms & Validation |
forms-validation.md |
@error, form helpers |
| Fragments |
fragments.md |
@fragment, HTMX integration |
Templates (Complete Code)
| Template |
When to Use |
| ClassComponent.php.md |
Component with logic/DI |
| AnonymousComponent.blade.md |
Simple reusable UI |
| LayoutComponent.blade.md |
Page layout structure |
| FormComponent.blade.md |
Form with validation |
| CardWithSlots.blade.md |
Named slots pattern |
| DynamicComponent.blade.md |
Runtime component |
| AdvancedDirectives.blade.md |
@once, @use, @inject, @switch |
| CustomDirectives.php.md |
Create custom directives |
| AdvancedComponents.blade.md |
@aware, shouldRender, index |
| Fragments.blade.md |
HTMX partial updates |
Quick Reference
Anonymous Component
{{-- resources/views/components/alert.blade.php --}}
@props(['type' => 'info', 'message'])
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
{{ $message }}
</div>
Class Component
// app/View/Components/Alert.php
class Alert extends Component
{
public function __construct(
public string $type = 'info',
public string $message = ''
) {}
public function render(): View
{
return view('components.alert');
}
}
Named Slots
<x-card>
<x-slot:header class="font-bold">
Title
</x-slot>
Content goes here
<x-slot:footer>
Footer content
</x-slot>
</x-card>
Attribute Merging
@props(['disabled' => false])
<button {{ $attributes->merge([
'type' => 'submit',
'class' => 'btn btn-primary'
])->class(['opacity-50' => $disabled]) }}
@disabled($disabled)
>
{{ $slot }}
</button>
Best Practices
DO
- Use
@props to document expected props
- Use
$attributes->merge() for flexibility
- Prefer anonymous components for simple UI
- Use named slots for complex layouts
- Keep components focused and reusable
DON'T
- Use
{!! !!} without sanitization
- Forget
@csrf in forms
- Put business logic in Blade templates
- Create deeply nested component hierarchies
- Hardcode classes (allow overrides)
1---2name: laravel-blade3description: Create Blade templates with components, slots, layouts, and directives. Use when building views, reusable components, or templating.4---5
6# Laravel Blade
7
8## Agent Workflow (MANDATORY)
9
10Before ANY implementation, launch in parallel:
11
121. **fuse-ai-pilot:explore-codebase** - Check existing views, components structure
132. **fuse-ai-pilot:research-expert** - Verify latest Blade docs via Context7
143. **mcp__context7__query-docs** - Query specific patterns (components, slots)
15
16After implementation, run **fuse-ai-pilot:sniper** for validation.
17
18---
19
20## Overview
21
22Blade is Laravel's templating engine. It provides a clean syntax for PHP in views while compiling to pure PHP for performance.
23
24| Component Type | When to Use |
25|----------------|-------------|
26| **Anonymous** | Simple UI, no logic needed |
27| **Class-based** | Dependency injection, complex logic |
28| **Layout** | Page structure, reusable shells |
29| **Dynamic** | Runtime component selection |
30
31---
32
33## Critical Rules
34
351. **Always escape output** - Use `{{ }}` not `{!! !!}` unless absolutely necessary
362. **Use @props** - Declare expected props explicitly
373. **Merge attributes** - Allow class/attribute overrides with `$attributes->merge()`
384. **Prefer anonymous** - Use class components only when logic is needed
395. **Use named slots** - For complex layouts with multiple content areas
406. **CSRF in forms** - Always include `@csrf` in forms
41
42---
43
44## Decision Guide
45
46### Component Type Selection
47
48```
49Need dependency injection?
50├── YES → Class-based component
51└── NO → Anonymous component
52 │
53 Need complex props logic?
54 ├── YES → Class-based component
55 └── NO → Anonymous component
56```
57
58### Layout Strategy
59
60```
61Simple page structure?
62├── YES → Component layout (<x-layout>)
63└── NO → Need fine-grained sections?
64 ├── YES → @extends/@section
65 └── NO → Component layout
66```
67
68---
69
70## Key Concepts
71
72| Concept | Description | Reference |
73|---------|-------------|-----------|
74| **@props** | Declare component properties | [components.md](references/components.md) |
75| **$attributes** | Pass-through HTML attributes | [slots-attributes.md](references/slots-attributes.md) |
76| **x-slot** | Named content areas | [slots-attributes.md](references/slots-attributes.md) |
77| **@yield/@section** | Traditional layout inheritance | [layouts.md](references/layouts.md) |
78| **$loop** | Loop iteration info | [directives.md](references/directives.md) |
79
80---
81
82## Reference Guide
83
84### Concepts (WHY & Architecture)
85
86| Topic | Reference | When to Consult |
87|-------|-----------|-----------------|
88| **Components** | [components.md](references/components.md) | Class vs anonymous, namespacing |
89| **Slots & Attributes** | [slots-attributes.md](references/slots-attributes.md) | Data flow, $attributes bag |
90| **Layouts** | [layouts.md](references/layouts.md) | Page structure, inheritance |
91| **Directives** | [directives.md](references/directives.md) | @if, @foreach, @auth, @can |
92| **Security** | [security.md](references/security.md) | XSS, CSRF, escaping |
93| **Vite** | [vite.md](references/vite.md) | Asset bundling |
94| **Advanced Directives** | [advanced-directives.md](references/advanced-directives.md) | @once, @use, @inject, @switch, stacks |
95| **Custom Directives** | [custom-directives.md](references/custom-directives.md) | Blade::if, Blade::directive |
96| **Advanced Components** | [advanced-components.md](references/advanced-components.md) | @aware, shouldRender, index |
97| **Forms & Validation** | [forms-validation.md](references/forms-validation.md) | @error, form helpers |
98| **Fragments** | [fragments.md](references/fragments.md) | @fragment, HTMX integration |
99
100### Templates (Complete Code)
101
102| Template | When to Use |
103|----------|-------------|
104| [ClassComponent.php.md](references/templates/ClassComponent.php.md) | Component with logic/DI |
105| [AnonymousComponent.blade.md](references/templates/AnonymousComponent.blade.md) | Simple reusable UI |
106| [LayoutComponent.blade.md](references/templates/LayoutComponent.blade.md) | Page layout structure |
107| [FormComponent.blade.md](references/templates/FormComponent.blade.md) | Form with validation |
108| [CardWithSlots.blade.md](references/templates/CardWithSlots.blade.md) | Named slots pattern |
109| [DynamicComponent.blade.md](references/templates/DynamicComponent.blade.md) | Runtime component |
110| [AdvancedDirectives.blade.md](references/templates/AdvancedDirectives.blade.md) | @once, @use, @inject, @switch |
111| [CustomDirectives.php.md](references/templates/CustomDirectives.php.md) | Create custom directives |
112| [AdvancedComponents.blade.md](references/templates/AdvancedComponents.blade.md) | @aware, shouldRender, index |
113| [Fragments.blade.md](references/templates/Fragments.blade.md) | HTMX partial updates |
114
115---
116
117## Quick Reference
118
119### Anonymous Component
120
121```blade
122{{-- resources/views/components/alert.blade.php --}}
123@props(['type' => 'info', 'message'])
124
125<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
126 {{ $message }}
127</div>
128```
129
130### Class Component
131
132```php
133// app/View/Components/Alert.php
134class Alert extends Component
135{
136 public function __construct(
137 public string $type = 'info',
138 public string $message = ''
139 ) {}
140
141 public function render(): View
142 {
143 return view('components.alert');
144 }
145}
146```
147
148### Named Slots
149
150```blade
151<x-card>
152 <x-slot:header class="font-bold">
153 Title
154 </x-slot>
155
156 Content goes here
157
158 <x-slot:footer>
159 Footer content
160 </x-slot>
161</x-card>
162```
163
164### Attribute Merging
165
166```blade
167@props(['disabled' => false])
168
169<button {{ $attributes->merge([
170 'type' => 'submit',
171 'class' => 'btn btn-primary'
172])->class(['opacity-50' => $disabled]) }}
173 @disabled($disabled)
174>
175 {{ $slot }}
176</button>
177```
178
179---
180
181## Best Practices
182
183### DO
184- Use `@props` to document expected props
185- Use `$attributes->merge()` for flexibility
186- Prefer anonymous components for simple UI
187- Use named slots for complex layouts
188- Keep components focused and reusable
189
190### DON'T
191- Use `{!! !!}` without sanitization
192- Forget `@csrf` in forms
193- Put business logic in Blade templates
194- Create deeply nested component hierarchies
195- Hardcode classes (allow overrides)
majiayu000