name	laravel:blade-components-and-layouts
description	Compose UIs with Blade components, slots, and layouts; keep templates pure and testable

Blade Components and Layouts

Encapsulate markup and behavior with components; prefer slots over includes.

Commands

sail artisan make:component Alert              # or: php artisan make:component Alert

// Use component
<x-alert type="warning" :message="$msg" class="mb-4" />

// Layouts + stacks
@extends('layouts.app')
@push('scripts')
    <script>/* page script */</script>
@endpush

Patterns

Keep components dumb: pass data in, emit markup out
Use merge() to honor passed classes/attributes in components
Prefer named slots for readability
Extract small, reusable atoms rather than giant organisms
Laravel 13+: use the @fonts directive (with the Vite font plugin) in layout <head> to emit preload links and @font-face rules automatically; @fonts(["sans", "mono"]) for a subset

name	laravel:blade-components-and-layouts
description	Compose UIs with Blade components, slots, and layouts; keep templates pure and testable

Blade Components and Layouts

Encapsulate markup and behavior with components; prefer slots over includes.

Commands

sail artisan make:component Alert              # or: php artisan make:component Alert

// Use component
<x-alert type="warning" :message="$msg" class="mb-4" />

// Layouts + stacks
@extends('layouts.app')
@push('scripts')
    <script>/* page script */</script>
@endpush

Patterns

Keep components dumb: pass data in, emit markup out
Use merge() to honor passed classes/attributes in components
Prefer named slots for readability
Extract small, reusable atoms rather than giant organisms
Laravel 13+: use the @fonts directive (with the Vite font plugin) in layout <head> to emit preload links and @font-face rules automatically; @fonts(["sans", "mono"]) for a subset

laravel-blade-components-and-layouts

Install options

Review the source files

Blade Components and Layouts

Commands

Patterns

Blade Components and Layouts

Commands

Patterns

laravel-blade-components-and-layouts

Source facts

Install options

Review the source files

More from this repository

More from this repository

Blade Components and Layouts

Commands

Patterns

Blade Components and Layouts

Commands

Patterns