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

laravelcloud logo
Laravel Cloud

Easily create and manage your servers and deploy your Laravel applications in seconds.

Visit Laravel Cloud

The latest

View all →
CPX: The Composer Package Executor for PHP image

CPX: The Composer Package Executor for PHP

Read article
Laravel AI SDK Adds Human-in-the-Loop Tool Approval image

Laravel AI SDK Adds Human-in-the-Loop Tool Approval

Read article
Pest 5 Released With Test Impact Analysis, Agent Verification, and Evals image

Pest 5 Released With Test Impact Analysis, Agent Verification, and Evals

Read article
Queue-SQL: Run Mass Deletes and Updates Across Parallel Queue Jobs image

Queue-SQL: Run Mass Deletes and Updates Across Parallel Queue Jobs

Read article
Blade Formatting in Laravel Pint image

Blade Formatting in Laravel Pint

Read article
Inertia DevTools Is Now on the Chrome Web Store image

Inertia DevTools Is Now on the Chrome Web Store

Read article