Laravel Blade
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- 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
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)
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)
