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
Google, Twitter, GitHub, Facebook & Many Other Social Generic Logins With PHP Laravel Socialite
Global Data In All Laravel Blade Pages
Setup Docker for NodeJs, MongoDB, MongoDB Compass
Factories To Speed Up Test-Driven Development In Laravel
Factory States For Clean And Fluent Laravel Testing
What Is Laravel Resourceful Controllers?
Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench
Push Files To CPanel / Remote Server using FTP Software FileZilla
Create A Composer Package? Test It Locally And Add To Packagist Repository
Increase Session Timeout In Laravel
Why And How To Use PHP PDO With CRUD Examples
Accessors And Mutators In PHP Laravel
