Introduction to Blade

Last modified on: September 4, 2025

<h1 data-start="134" data-end="168">🚀 Blade Templating in Laravel</h1>
<p data-start="170" data-end="330"><strong data-start="170" data-end="179">Blade</strong> is Laravel&rsquo;s built-in <strong data-start="202" data-end="223">templating engine</strong>. It allows you to write clean, dynamic, and reusable templates for your application using simple syntax.</p>
<p data-start="332" data-end="468">Instead of writing pure PHP inside HTML, Blade gives you a <strong data-start="391" data-end="413">lightweight syntax</strong> that compiles into plain PHP for better performance.</p>
<hr data-start="470" data-end="473" />
<h2 data-start="475" data-end="500">🔹 1. What is Blade?</h2>
<ul data-start="502" data-end="713">
<li data-start="502" data-end="544">
<p data-start="504" data-end="544">Located inside <strong data-start="519" data-end="541"><code data-start="521" data-end="539">resources/views/</code></strong>.</p>
</li>
<li data-start="545" data-end="582">
<p data-start="547" data-end="582">Uses <code data-start="552" data-end="564">.blade.php</code> file extension.</p>
</li>
<li data-start="583" data-end="669">
<p data-start="585" data-end="669">Provides features like <strong data-start="608" data-end="666">layouts, loops, conditionals, components, and includes</strong>.</p>
</li>
<li data-start="670" data-end="713">
<p data-start="672" data-end="713">Compiles into PHP and caches for speed.</p>
</li>
</ul>
<hr data-start="715" data-end="718" />
<h2 data-start="720" data-end="752">🔹 2. Creating a Blade View</h2>
<p data-start="754" data-end="800">Example: <code data-start="763" data-end="798">resources/views/welcome.blade.php</code></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Welcome Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello, {{ $name }}!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</div>
</div>
<p data-start="942" data-end="953">➡️ Route:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>Route::get('/welcome/{name}', function ($name) {
    return view('welcome', ['name' =&gt; $name]);
});</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1067" data-end="1112">Visiting <code data-start="1076" data-end="1091">/welcome/Amit</code> &rarr; <strong data-start="1094" data-end="1110">Hello, Amit!</strong></p>
<hr data-start="1114" data-end="1117" />
<h2 data-start="1119" data-end="1142">🔹 3. Blade Syntax</h2>
<h3 data-start="1144" data-end="1167">✅ Displaying Data</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>Hello, {{ $name }}</code></pre>
</div>
</div>
</div>
</div>
<ul data-start="1202" data-end="1274">
<li data-start="1202" data-end="1230">
<p data-start="1204" data-end="1230">Escaped (safe from XSS).</p>
</li>
<li data-start="1231" data-end="1274">
<p data-start="1233" data-end="1274">Use <code data-start="1237" data-end="1252">{!! $data !!}</code> for unescaped HTML.</p>
</li>
</ul>
<hr data-start="1276" data-end="1279" />
<h3 data-start="1281" data-end="1301">✅ Conditionals</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>@if($age &gt;= 18)
    &lt;p&gt;You are an adult.&lt;/p&gt;
@else
    &lt;p&gt;You are a minor.&lt;/p&gt;
@endif</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1403" data-end="1406" />
<h3 data-start="1408" data-end="1421">✅ Loops</h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>@foreach($users as $user)
    &lt;li&gt;{{ $user-&gt;name }}&lt;/li&gt;
@endforeach</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1506" data-end="1551">Also supports <code data-start="1520" data-end="1526">@for</code>, <code data-start="1528" data-end="1536">@while</code>, <code data-start="1538" data-end="1548">@forelse</code>.</p>
<hr data-start="1553" data-end="1556" />
<h2 data-start="1558" data-end="1582">🔹 4. Blade Layouts</h2>
<p data-start="1584" data-end="1660">Instead of repeating header/footer on every page, you create a <strong data-start="1647" data-end="1657">layout</strong>.</p>
<h3 data-start="1662" data-end="1718">✅ Example: <code data-start="1677" data-end="1716">resources/views/layouts/app.blade.php</code></h3>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;My App - @yield('title')&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;h1&gt;My Application&lt;/h1&gt;
    &lt;/header&gt;

&lt;main&gt;
        @yield('content')
    &lt;/main&gt;

&lt;footer&gt;
        &lt;p&gt;&copy; 2025 My App&lt;/p&gt;
    &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</div>
</div>
<h3 data-start="2005" data-end="2043">✅ Extending Layout in Child View</h3>
<p data-start="2045" data-end="2079"><code data-start="2045" data-end="2077">resources/views/home.blade.php</code></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>@extends('layouts.app')

@section('title', 'Home Page')

@section('content')
    &lt;h2&gt;Welcome to the Home Page!&lt;/h2&gt;
@endsection</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2223" data-end="2234">➡️ Route:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-php"><code>Route::get('/home', function () {
    return view('home');
});</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="2311" data-end="2314" />
<h2 data-start="2316" data-end="2335">🔹 5. Includes</h2>
<p data-start="2337" data-end="2383">You can reuse partials (like header/footer).</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="overflow-y-auto p-4" dir="ltr">
<pre class="language-php"><code>@include('partials.header')
@include('partials.footer')</code></pre>
</div>
</div>
<hr data-start="2455" data-end="2458" />
<h2 data-start="2460" data-end="2487">🔹 6. Blade Components</h2>
<p data-start="2489" data-end="2514">For reusable UI blocks.</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="overflow-y-auto p-4" dir="ltr">
<pre class="language-php"><code>php artisan make:component Alert</code></pre>
</div>
</div>
<p data-start="2562" data-end="2572">Creates:</p>
<ul data-start="2573" data-end="2657">
<li data-start="2573" data-end="2608">
<p data-start="2575" data-end="2608"><code data-start="2575" data-end="2606">app/View/Components/Alert.php</code></p>
</li>
<li data-start="2609" data-end="2657">
<p data-start="2611" data-end="2657"><code data-start="2611" data-end="2655">resources/views/components/alert.blade.php</code></p>
</li>
</ul>
<p data-start="2659" data-end="2679"><code data-start="2659" data-end="2676">alert.blade.php</code>:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="overflow-y-auto p-4" dir="ltr">
<pre class="language-markup"><code>&lt;div class="alert alert-{{ $type }}"&gt;
    {{ $slot }}
&lt;/div&gt;</code></pre>
</div>
</div>
<p data-start="2756" data-end="2780">Use in any Blade file:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="overflow-y-auto p-4" dir="ltr">
<pre class="language-markup"><code>&lt;x-alert type="success"&gt;
    User created successfully!
&lt;/x-alert&gt;</code></pre>
</div>
</div>
<hr data-start="2863" data-end="2866" />
<h2 data-start="2868" data-end="2895">🔹 7. Blade Directives</h2>
<p data-start="2897" data-end="2939">Blade comes with many useful directives:</p>
<ul data-start="2941" data-end="3132">
<li data-start="2941" data-end="2975">
<p data-start="2943" data-end="2975"><code data-start="2943" data-end="2950">@csrf</code> &rarr; CSRF token for forms</p>
</li>
<li data-start="2976" data-end="3019">
<p data-start="2978" data-end="3019"><code data-start="2978" data-end="2994">@auth / @guest</code> &rarr; Check authentication</p>
</li>
<li data-start="3020" data-end="3066">
<p data-start="3022" data-end="3066"><code data-start="3022" data-end="3039">@error('field')</code> &rarr; Show validation errors</p>
</li>
<li data-start="3067" data-end="3103">
<p data-start="3069" data-end="3103"><code data-start="3069" data-end="3079">@include</code> &rarr; Include other views</p>
</li>
<li data-start="3104" data-end="3132">
<p data-start="3106" data-end="3132"><code data-start="3106" data-end="3112">@php</code> &rarr; Execute raw PHP</p>
</li>
</ul>
<hr data-start="3134" data-end="3137" />
<h2 data-start="3139" data-end="3154">📌 Summary</h2>
<ul data-start="3156" data-end="3403">
<li data-start="3156" data-end="3200">
<p data-start="3158" data-end="3200"><strong data-start="3158" data-end="3167">Blade</strong> = Laravel&rsquo;s templating engine.</p>
</li>
<li data-start="3201" data-end="3279">
<p data-start="3203" data-end="3279">Provides <strong data-start="3212" data-end="3229">simple syntax</strong> for conditions, loops, layouts, and components.</p>
</li>
<li data-start="3280" data-end="3318">
<p data-start="3282" data-end="3318">Makes code <strong data-start="3293" data-end="3315">reusable and clean</strong>.</p>
</li>
<li data-start="3319" data-end="3403">
<p data-start="3321" data-end="3403">Works with both <strong data-start="3337" data-end="3350">web pages</strong> and <strong data-start="3355" data-end="3400">API frontends (Vue, React, Inertia, etc.)</strong>.</p>
</li>
</ul>

Web Technology View More