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

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)