If you are learning Laravel, you will quickly come across Blade, Laravel’s powerful and simple templating engine. Blade makes it easier to build dynamic web pages by combining HTML with Laravel’s template syntax.
Unlike traditional PHP templates, Laravel Blade templates provide a clean syntax for displaying data, creating conditional layouts, looping through records, handling forms, and building reusable components.
In this beginner’s guide, you’ll learn how Laravel Blade works, how to create Blade views, display dynamic data, use Blade directives, create layouts and components, work with forms, and follow Blade best practices.
What Is Laravel Blade?
Blade is the templating engine included with Laravel.
It allows developers to write regular HTML while using special Blade syntax to add dynamic application logic.
Blade templates typically use the .blade.php file extension.
For example:
resources/
└── views/
├── home.blade.php
├── products.blade.php
└── users/
└── profile.blade.php
A simple Blade template might look like this:
<!DOCTYPE html>
<html>
<head>
<title>My Laravel App</title>
</head>
<body>
<h1>Welcome to Laravel</h1>
</body>
</html>
The important thing to understand is that Blade does not replace HTML. Instead, it extends PHP’s templating capabilities while keeping templates clean and readable.
Why Use Laravel Blade Templates?
Blade provides several features that make Laravel application development easier.
Some important benefits include:
- Simple and readable syntax
- Easy data rendering
- Conditional statements
- Loops
- Template inheritance
- Reusable components
- Layouts
- Form helpers
- Authentication directives
- Built-in security features
- Easy integration with Laravel controllers and routes
Blade is especially useful for applications that render HTML directly from Laravel.
How Laravel Blade Templates Work
A typical Laravel application follows this flow:
Browser
│
│ HTTP Request
▼
Route
│
▼
Controller
│
▼
Model
│
▼
Database
│
▼
Controller
│
▼
Blade Template
│
▼
HTML Response
│
▼
Browser
For example:
Route::get('/products', [ProductController::class, 'index']);
The controller can retrieve products:
public function index()
{
$products = Product::all();
return view('products.index', compact('products'));
}
The Blade template can then display them:
<h1>Products</h1>
@foreach ($products as $product)
<h2>{{ $product->name }}</h2>
@endforeach
This separation keeps the application organized.
Where Are Blade Templates Stored?
Laravel Blade templates are normally stored inside:
resources/views
For example:
resources/
└── views/
├── home.blade.php
├── about.blade.php
├── contact.blade.php
├── products/
│ ├── index.blade.php
│ ├── show.blade.php
│ └── create.blade.php
└── layouts/
└── app.blade.php
The .blade.php extension tells Laravel that the file is a Blade template.
Creating Your First Blade Template
Create a file:
resources/views/welcome.blade.php
Add:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1>Welcome to my Laravel application</h1>
<p>This page is powered by Laravel Blade.</p>
</body>
</html>
Now create a route:
use Illuminate\Support\Facades\Route;
Route::get('/welcome', function () {
return view('welcome');
});
When you visit:
/welcome
Laravel renders the Blade template as HTML.
Understanding the view() Helper
Laravel uses the view() helper to return a Blade template.
For example:
return view('home');
Laravel looks for:
resources/views/home.blade.php
For templates inside folders, use dot notation:
return view('products.index');
Laravel looks for:
resources/views/products/index.blade.php
This makes organizing larger applications much easier.
Passing Data to Blade Templates
One of the most common things you’ll do with Blade is display data from a controller.
For example:
public function index()
{
$name = 'John';
return view('home', compact('name'));
}
The Blade template can access the variable:
<h1>Hello, {{ $name }}</h1>
The resulting HTML will be:
<h1>Hello, John</h1>
Displaying Variables in Blade
Blade provides {{ }} syntax for displaying data.
<h1>{{ $name }}</h1>
You can display object properties:
<h2>{{ $product->name }}</h2>
<p>{{ $product->price }}</p>
You can also display array values:
<p>{{ $user['name'] }}</p>
Blade Escaping and Security
One of the important features of Blade is automatic HTML escaping.
When you write:
{{ $name }}
Blade escapes the output.
This helps protect applications against common cross-site scripting (XSS) vulnerabilities when displaying untrusted data.
For example:
{{ $user->name }}
is generally safer than directly outputting raw HTML.
If you intentionally need to render trusted HTML, Blade provides:
{!! $html !!}
However, be careful with untrusted content.
Do not use raw output for user-generated content unless it has been properly sanitized.
Blade Comments
Blade provides its own comment syntax:
{{-- This is a Blade comment --}}
Unlike regular HTML comments, Blade comments are not included in the final HTML response.
You can use them to document template logic:
{{-- Display the user's account information --}}
<div class="profile">
{{ $user->name }}
</div>
Blade Conditional Statements
Blade provides convenient directives for conditional logic.
@if
@if ($user->isAdmin)
<p>Welcome, Administrator!</p>
@endif
@else
@if ($user->isAdmin)
<p>Admin Dashboard</p>
@else
<p>User Dashboard</p>
@endif
@elseif
@if ($role === 'admin')
<p>Administrator</p>
@elseif ($role === 'editor')
<p>Editor</p>
@else
<p>User</p>
@endif
@unless
@unless is useful when you want to execute something when a condition is false.
@unless ($user->isVerified)
<p>Please verify your email address.</p>
@endunless
This is equivalent to:
@if (!$user->isVerified)
<p>Please verify your email address.</p>
@endif
Blade Loops
Blade provides directives for looping through collections and arrays.
@foreach
@foreach ($products as $product)
<h2>{{ $product->name }}</h2>
<p>{{ $product->price }}</p>
@endforeach
This is one of the most commonly used Blade directives.
@forelse
@forelse is useful when you want to display something when a collection is empty.
@forelse ($products as $product)
<h2>{{ $product->name }}</h2>
@empty
<p>No products found.</p>
@endforelse
This is often cleaner than:
@if ($products->count())
@foreach ($products as $product)
<h2>{{ $product->name }}</h2>
@endforeach
@else
<p>No products found.</p>
@endif
@for
You can also use traditional loops:
@for ($i = 1; $i <= 5; $i++)
<p>Number: {{ $i }}</p>
@endfor
@while
Blade supports while loops as well:
@while ($count < 5)
<p>{{ $count }}</p>
@php
$count++;
@endphp
@endwhile
However, for most database-driven views, @foreach is generally more common.
Blade Loop Variables
Blade provides a special $loop variable inside loops.
For example:
@foreach ($products as $product)
<p>
{{ $loop->iteration }}.
{{ $product->name }}
</p>
@endforeach
Useful loop properties include:
$loop->index
$loop->iteration
$loop->remaining
$loop->count
$loop->first
$loop->last
For example:
@foreach ($products as $product)
@if ($loop->first)
<strong>Featured Product</strong>
@endif
<p>{{ $product->name }}</p>
@endforeach
Blade Layouts and Template Inheritance
One of the biggest advantages of Blade is template inheritance.
Instead of repeating the same HTML structure across every page, you can create a common layout.
For example:
resources/views/
├── layouts/
│ └── app.blade.php
├── home.blade.php
├── about.blade.php
└── products.blade.php
The layout can contain the shared structure.
<!DOCTYPE html>
<html>
<head>
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>My Laravel Application</h1>
</header>
<main>
@yield('content')
</main>
</body>
</html>
A child template can extend it:
@extends('layouts.app')
@section('title', 'Home')
@section('content')
<h2>Welcome</h2>
<p>This is the home page.</p>
@endsection
The rendered page combines the layout and child content.
Understanding @extends, @section, and @yield
These three Blade directives are fundamental to template inheritance.
@extends
Specifies which layout a template should use.
@extends('layouts.app')
@yield
Defines a location where content should appear.
@yield('content')
@section
Provides content for a section.
@section('content')
<h1>Hello Laravel</h1>
@endsection
The relationship looks like:
layouts/app.blade.php
│
├── @yield('title')
│
└── @yield('content')
▲
│
@section('content')
│
home.blade.php
Blade Components
For modern Laravel applications, Blade components are an excellent way to create reusable UI elements.
Examples include:
- Buttons
- Alerts
- Cards
- Modals
- Navigation items
- Form inputs
- Tables
A component can be generated using Artisan:
php artisan make:component Alert
Laravel can generate component files under the appropriate component directories.
You can then use a component like:
<x-alert />
This allows reusable UI elements to be shared across multiple pages.
Passing Data to Blade Components
Components can accept data through attributes.
For example:
<x-alert type="success" message="Product created successfully." />
Inside the component, the values can be accessed as component properties depending on how the component is defined.
This makes components flexible and reusable.
For example, a reusable alert component can support:
<x-alert
type="error"
message="Something went wrong."
/>
and:
<x-alert
type="success"
message="Profile updated successfully."
/>
Blade Includes
Sometimes you don’t need a full component. You simply want to reuse a Blade partial.
For example:
resources/views/
├── products/
│ └── index.blade.php
└── partials/
└── navbar.blade.php
You can include the partial:
@include('partials.navbar')
You can also pass data:
@include('partials.product-card', [
'product' => $product
])
This is useful for smaller reusable pieces of markup.
Blade Stacks
Blade stacks allow child templates to push content into a layout.
For example, your layout might contain:
<head>
@stack('styles')
</head>
A child view can add CSS:
@push('styles')
<link rel="stylesheet" href="/css/products.css">
@endpush
The pushed content will be rendered where @stack('styles') appears.
This can be useful for page-specific CSS and JavaScript.
Blade Forms
Blade works well with Laravel forms.
For example:
<form method="POST" action="/products">
@csrf
<input
type="text"
name="name"
placeholder="Product name"
>
<input
type="number"
name="price"
placeholder="Price"
>
<button type="submit">
Create Product
</button>
</form>
What Is @csrf in Blade?
Laravel includes CSRF protection for web forms.
When creating a POST form, include:
@csrf
This generates a hidden CSRF token field.
For example:
<form method="POST" action="/products">
@csrf
<!-- Form fields -->
</form>
The token helps Laravel verify that the request originated from an authorized application form.
Forgetting @csrf on protected POST, PUT, PATCH, or DELETE forms can result in a CSRF token mismatch error.
Blade Forms With PUT and DELETE
HTML forms traditionally support only GET and POST.
Laravel provides method spoofing for other HTTP methods.
For example, to update a product:
<form
method="POST"
action="{{ route('products.update', $product) }}"
>
@csrf
@method('PUT')
<input
type="text"
name="name"
value="{{ $product->name }}"
>
<button type="submit">
Update
</button>
</form>
For deleting:
<form
method="POST"
action="{{ route('products.destroy', $product) }}"
>
@csrf
@method('DELETE')
<button type="submit">
Delete
</button>
</form>
Displaying Validation Errors in Blade
Laravel makes it easy to display validation errors.
You can check whether errors exist:
@if ($errors->any())
<div>
Please fix the following errors:
</div>
@endif
You can display all errors:
@if ($errors->any())
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@endif
You can also display an error for a specific field:
@error('email')
<p>{{ $message }}</p>
@enderror
This is particularly useful for forms.
Retaining Old Form Input
If validation fails, Laravel can make previous input available using the old() helper.
<input
type="text"
name="name"
value="{{ old('name') }}"
>
For example:
<input
type="email"
name="email"
value="{{ old('email') }}"
>
This prevents users from having to re-enter every field after a validation error.
Blade Authentication Directives
Blade provides convenient directives for authentication-related UI.
For example:
@auth
<p>Welcome back!</p>
@endauth
For guests:
@guest
<a href="/login">Login</a>
@endguest
You can also use:
@auth
<a href="/dashboard">Dashboard</a>
@endauth
This makes it easy to conditionally display navigation items.
Blade Authorization
Laravel also provides Blade directives for authorization.
For example:
@can('update', $post)
<a href="/posts/{{ $post->id }}/edit">
Edit
</a>
@endcan
You can use authorization directives to control whether users see certain actions.
However, remember that hiding a button is not a substitute for server-side authorization. The underlying controller or policy should still enforce permissions.
Blade Environment Directives
You can conditionally render content based on the application environment.
For example:
@env('local')
<p>Running in local development.</p>
@endenv
You can use this for development-only UI or debugging information.
Avoid exposing sensitive configuration or debugging information in production.
Blade @php Directive
Blade allows you to execute small pieces of PHP using @php.
For example:
@php
$total = $price * $quantity;
@endphp
<p>Total: {{ $total }}</p>
While this is available, avoid putting complex application logic inside Blade templates.
If the calculation is complicated or reused, it generally belongs in the controller, model, service, or another appropriate application layer.
Blade and Laravel Route Helpers
Blade works naturally with Laravel’s named routes.
Instead of hardcoding URLs:
<a href="/products/{{ $product->id }}">
View Product
</a>
you can use:
<a href="{{ route('products.show', $product) }}">
View Product
</a>
This is generally easier to maintain because the URL structure can change without requiring every template to be updated.
Blade and Assets
Laravel applications often need CSS, JavaScript, images, and other assets.
With modern Laravel applications, frontend assets are commonly managed through Vite.
For example:
@vite(['resources/css/app.css', 'resources/js/app.js'])
This allows Laravel to integrate the frontend build process into Blade templates.
Blade vs Plain PHP Templates
Blade is built on top of PHP but provides a cleaner syntax for common templating operations.
| Feature | Blade | Plain PHP |
|---|---|---|
| Conditional logic | @if | <?php if ?> |
| Loops | @foreach | foreach |
| Layouts | Built-in inheritance | Manual/includes |
| Components | Blade components | Manual |
| Escaping | {{ }} | Manual |
| Laravel integration | Excellent | Possible |
| Readability | High | Can become verbose |
Blade is particularly useful because it integrates directly with Laravel’s routing, authentication, validation, authorization, and other features.
Common Laravel Blade Mistakes
1. Putting Too Much Logic in Blade
Avoid:
@php
// Complex business logic
// Database queries
// Multiple calculations
@endphp
Blade should primarily be responsible for presentation.
Move complex logic into appropriate application layers.
2. Forgetting @csrf
For Laravel web forms that require CSRF protection, remember:
@csrf
Without it, your request may fail with a CSRF token mismatch.
3. Using Raw HTML Output Carelessly
Avoid using:
{!! $userInput !!}
for untrusted content.
Prefer:
{{ $userInput }}
unless you specifically need trusted HTML output.
4. Performing Database Queries Inside Views
Avoid code such as:
@php
$products = App\Models\Product::all();
@endphp
This mixes presentation and data access.
Instead, retrieve the data in a controller or service and pass it to the view.
5. Creating Extremely Large Blade Files
If a Blade file becomes hundreds or thousands of lines long, consider splitting it into:
- Components
- Layouts
- Partials
- Sections
- Dedicated views
This improves readability and maintainability.
Laravel Blade Best Practices
Keep Blade Focused on Presentation
Blade should primarily render data and UI.
Instead of putting business logic into a template:
@php
// Complex application logic
@endphp
prepare the necessary data before rendering the view.
Use Blade Components for Reusable UI
If the same UI element appears repeatedly, consider creating a component.
Examples:
Button
Alert
Modal
Card
Input
Dropdown
Navbar
This reduces duplication.
Use Layouts for Shared Structure
Create a common layout for:
- Header
- Navigation
- Footer
- Main content
- Scripts
- Styles
Then let individual pages provide their own content.
Use @forelse for Empty Collections
Instead of writing multiple conditional statements, use:
@forelse ($products as $product)
<p>{{ $product->name }}</p>
@empty
<p>No products found.</p>
@endforelse
This keeps list templates concise.
Use Named Routes
Prefer:
route('products.show', $product)
over hardcoded URLs when named routes are available.
Real-World Example: Product Listing Page
Suppose a controller retrieves products:
public function index()
{
$products = Product::latest()->paginate(12);
return view('products.index', compact('products'));
}
Your Blade template could be:
@extends('layouts.app')
@section('title', 'Products')
@section('content')
<div class="products">
<h1>Products</h1>
@forelse ($products as $product)
<article class="product-card">
<h2>{{ $product->name }}</h2>
<p>
${{ number_format($product->price, 2) }}
</p>
<a href="{{ route('products.show', $product) }}">
View Product
</a>
</article>
@empty
<p>No products are available.</p>
@endforelse
</div>
@endsection
This example demonstrates:
- Blade layouts
- Sections
- Loops
- Empty-state handling
- Escaped output
- Named routes
- Pagination-ready data
A Clean Laravel Blade Project Structure
A growing Laravel application can organize views like this:
resources/
└── views/
│
├── layouts/
│ ├── app.blade.php
│ └── guest.blade.php
│
├── components/
│ ├── alert.blade.php
│ ├── button.blade.php
│ └── card.blade.php
│
├── partials/
│ ├── navbar.blade.php
│ └── footer.blade.php
│
├── products/
│ ├── index.blade.php
│ ├── create.blade.php
│ ├── edit.blade.php
│ └── show.blade.php
│
└── dashboard.blade.php
This structure makes it easier to find and reuse views as your application grows.
Laravel Blade Templates: Key Takeaways
The most important concepts to remember are:
- Blade is Laravel’s built-in templating engine.
- Blade files normally use the
.blade.phpextension. - Blade templates are stored inside
resources/views. - Use
{{ }}to safely display escaped data. - Use
@if,@foreach,@forelse, and other directives for template logic. - Use
@extends,@section, and@yieldfor layouts. - Use Blade components for reusable UI elements.
- Use
@includefor reusable view fragments. - Use
@csrfin protected forms. - Use
@errorto display validation errors. - Use named routes instead of unnecessarily hardcoding URLs.
- Keep complex business logic outside Blade templates.
- Use layouts and components to prevent duplicated markup.
Frequently Asked Questions
What are Laravel Blade templates?
Laravel Blade templates are PHP-based view files used to generate HTML in Laravel applications. They use the .blade.php extension and provide convenient syntax for displaying data, loops, conditions, layouts, components, and other UI logic.
Where are Blade templates stored in Laravel?
Blade templates are normally stored in:
resources/views
For example:
resources/views/home.blade.php
What is the difference between Blade and PHP?
Blade is Laravel’s templating engine built on top of PHP. It provides cleaner syntax for common template operations, automatic output escaping, template inheritance, components, and tight integration with Laravel.
How do I pass data from a controller to a Blade view?
You can pass data using the view() helper:
public function index()
{
$name = 'John';
return view('home', compact('name'));
}
The Blade template can then access:
<h1>Hello, {{ $name }}</h1>
What does @extends do in Blade?
@extends allows a Blade template to inherit a layout.
For example:
@extends('layouts.app')
The child template can then provide content using @section.
What does @yield mean in Laravel Blade?
@yield defines a placeholder in a Blade layout where content from a child template will be inserted.
For example:
@yield('content')
A child template can provide the content with:
@section('content')
<h1>Dashboard</h1>
@endsection
What is @csrf in Laravel Blade?
@csrf generates a hidden CSRF token field for forms. Laravel uses this token to help protect web requests against cross-site request forgery.
Example:
<form method="POST" action="/products">
@csrf
<!-- Form fields -->
</form>
Should I put PHP logic inside Blade templates?
Small presentation-related conditions are fine, but complex business logic, database queries, and reusable application logic should generally not be placed inside Blade templates.
Keep Blade focused on presenting data and use controllers, services, models, and other application layers for more complex responsibilities.
Conclusion
Laravel Blade Templates provide a clean and powerful way to build dynamic web interfaces with Laravel. Instead of writing repetitive PHP and HTML, Blade gives developers an expressive syntax for displaying data, handling conditions, creating loops, building layouts, rendering forms, and creating reusable components.
For beginners, start by learning the core Blade features such as {{ }}, @if, @foreach, @forelse, @extends, @section, @yield, @include, and @csrf.
As your Laravel applications become more complex, move toward reusable Blade components, shared layouts, and clean separation between presentation and business logic.
When used properly, Blade can make Laravel views easier to read, maintain, reuse, and scale.
