Laravel Tutorials

Laravel Blade @prepend Directive

Published
Laravel Blade @prepend Directive image

In version 5.4 Laravel added a new components and slots feature that simplifies building HTML elements into reusable areas.

As an example of how this features works pretend you have a layout.blade.php file that includes this:

<ul id="sidebar">
@stack('sidebar')
</ul>

Now when you want to insert data into this section from a sub-view you can add:

@push('sidebar')
<li>Sidebar list item</li>
@endpush

Once this is rendered in the browser the results are an unordered list:

<ul id="sidebar">
<li>Sidebar list item</li>
</ul>

Now since v5.4.10 a new prepend directive has been which allows you to push an item to the front of the stack before it’s rendered.

For example:

@push('sidebar')
<li>Sidebar list item</li>
@endpush
 
@prepend('sidebar')
<li>First Sidebar Item</li>
@endprepend

Now, the results will be:

<ul id="sidebar">
<li>First Sidebar Item</li>
<li>Sidebar list item</li>
</ul>

This will be great in those situations where you need to push items to the front of the stack.

Eric L. Barnes photo

Eric is the creator of Laravel News and has been covering Laravel since 2012.

Sponsored

serpapi logo
SerpApi

The Web Search API for Your LLM and AI Applications

Visit SerpApi

The latest

View all →
Securing Filament plugins with Plumb image

Securing Filament plugins with Plumb

Read article
LayaPHP: Self-Hosted Text Classification for PHP and Laravel image

LayaPHP: Self-Hosted Text Classification for PHP and Laravel

Read article
WhenMounted and BigInt Props in Inertia.js v3.8 image

WhenMounted and BigInt Props in Inertia.js v3.8

Read article
Postcodes for Laravel: GB Postcode Lookup and Geography Data image

Postcodes for Laravel: GB Postcode Lookup and Geography Data

Read article
Laravel 14 Adds a defaults() Method to Eloquent Models image

Laravel 14 Adds a defaults() Method to Eloquent Models

Read article
Laravel AI SDK and Laravel MCP Security Fixes: Update Now image

Laravel AI SDK and Laravel MCP Security Fixes: Update Now

Read article