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 @append | StackCoder


@stack @push and @prepend In Laravel Blade


16th July 2020 3 mins read
Share On     Share On WhatsApp     Share On LinkedIn


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.


WHATS NEXT?


SummerNote WYSIWYG Text Editor

Client-Side DataTable, Adding Super Powers To HTML Table

Multiple File Uploads In Laravel PHP

File Upload In Laravel PHP

How To Create Gmail App Password For SMTP Mails

Free Live Chat Integration Using TAWK.IO

Laravel Custom Maintenance Page


Happy Coding :)








Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing