Good content takes time and effort to come up with.
Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.
@stack @push and @prepend In Laravel Blade
16th July 2020
3 mins read
Share On
Hello! You amazing people, I am back with a new article where I will discuss on @stack, @push & @prepend directive in Laravel Blade templating.
There will be a lot of different opinions on how to use the blade template directives. It may vary from developer to developer. In this article, I will do my best to make you understand some of my knowledge on @stack, @push & @prepend.
Regular Templating (@yield & @section)
Most of the time while your working on Laravel blade templating you use @yield as follows
master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel Blade Templating Demo</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
@yield('stylesheets')
</head>
<body>
@yield('content')
@yield('javascripts')
</body>
</html>
You will extend all your child templates with @section directive as follows
child.blade.php
@extends('layouts.master')
<!-- Start of Stylesheets -->
@section('stylesheets')
<style>
.text-green{ color: #008000; }
</style>
@endsection
<!-- Start of Javascript -->
@section('javascripts')
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
@endsection
<!-- Start of content -->
@section('content')
Some random content
@endsection
Basically @yield will be replaced with @section content.
NOTE: You can't use same sections directives twice in your blade template ie @section('javscripts') or @section('stylesheets'). If you try to use then only the first one will work.Disadvantage Of Above Template
Consider, if you would like to add anything before the @yield or after that @yield directive, or if your child blade template has partials where you would like to add something then it will be nightmare.
Can't prepend or append to the parent @yield directive. Can be achieved with @parent directive, but not completely and even few beginners find it complicated.
Advance Templating (@stack, @push & @prepend)
But don't worry @stack @push @prepend will come to your rescue.
@stack - It is basically a basket that hold's all the things that are pushed from the child blade template. You may push to a stack as many times as needed.
To render the complete stack contents, pass the name of the stack to the @stack directive
@push - This is used to append the codes to parent template @stack directive
@prepend - If you would like to put anything before @stack code then you will use @prepend to put the content before it.
Blade template allows you to push to named stacks which can be rendered somewhere else in another view or layout.
master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Upload</title>
@stack('stylesheets')
</head>
<body>
@yield('content')
@stack('javascripts')
</body>
</html>
Now you can use this as follows
@extends('layouts.master')
@push('stylesheets')
<style>
body{ background: green; }
</style>
@endpush
@push('stylesheets')
<style>
body{ color: #fff; }
</style>
@endpush
@prepend('stylesheets')
<style>
body{ font-weight: bold; }
</style>
@endprepend
@section('content')
some content
@endsection
If you have observed carefully we have used @push('stylesheets') 2 times. Oh! Yes, that works perfectly fine.
@prepend directive will prepend its content above its top 2 @push('stylesheets') directives
NOTE: Basically you can use @stack with Javascripts a lot. For Eg: If you want to prepend some libraries from the master blade template.
Conclusion
Ya I know it's the least used in templating as many of them might not have come across. But ya it's totally worth using in your next project.
Hope you enjoyed the article. Please share it with your friends.
Articles For You
Testing Laravel Emails With MailHog
Foreign Key Migrations Simplified In Laravel 7.x
Lazy Load YouTube And Other Videos In Website
Send SMS With Amazon SNS (Simple Notification Service) Using PHP
Search Engine Optimization Concepts
GitHub Login With PHP Laravel Socialite
Setup AMP (Accelerated Mobile Pages) In PHP Laravel
Install Linux, Apache, MYSQL, PHP (LAMP Stack) on Ubuntu
SummerNote WYSIWYG Text Editor
Install Letsencrypt SSL Certificate for RabbitMQ Server and RabbitMQ Management Tool
Install Apache Web Server On Ubuntu 20.04 / Linux & Manage It
Route Model Binding In Laravel & Change Default Column id To Another Column
