Layouts with @extends
Most websites share a common structure — a header, footer, sidebar, and so on. Blade layouts let you define that structure once and reuse it across every page.
Start by creating a layout file, say layouts/app.blade.php:
<html>
<head>
<title>@yield('title', 'My App')</title>
</head>
<body>
@yield('content')
</body>
</html>
Then in any child view, extend the layout and define the sections:
@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
<h1>Welcome Home</h1>
@endsection
@yield and @section
@yield defines a placeholder in the layout. @section fills that placeholder from a child view. You can yield a default value as a fallback:
@yield('sidebar', '<p>Default sidebar content</p>')
If the child view doesn't define a @section('sidebar'), the default content is displayed.
@parent to Append Content
By default, a @section in a child view replaces the parent's content. But what if you want to add to it instead of replacing it? Use @parent:
@section('scripts')
@parent
<script src="/js/custom.js"></script>
@endsection
The @parent directive outputs everything from the parent's section, and your new content gets added after it.
Component Layouts
Component layouts use @component instead of @extends. They're great for reusable pieces that need their own markup structure:
@component('components/alert')
@slot('type')
success
@endslot
Record saved successfully!
@endcomponent
The components/alert.blade.php file would use @slot and {{$slot}} to receive content.
Anonymous Components
Anonymous components live in resources/views/components. No class needed — just the blade file. They're perfect for simple, self-contained UI pieces:
<x-alert type="success">
Everything worked!
</x-alert>
Laravel automatically finds components/alert.blade.php and renders it. Pass attributes as parameters, and they're available inside the component.