Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Blade Stacks & @push / @stack
Stacks let child views push CSS and JavaScript to specific locations in the layout - typically the <head> for styles and before </body> for scripts. This ensures page-specific assets load only on pages that need them.
Stacks Example
{{-- Layout: resources/views/layouts/app.blade.php --}}
<head>
<link rel="stylesheet" href="/css/app.css">
@stack('styles')
</head>
<body>
@yield('content')
<script src="/js/app.js"></script>
@stack('scripts')
</body>
{{-- Child view: resources/views/posts/show.blade.php --}}
@extends('layouts.app')
@push('styles')
<link rel="stylesheet" href="/css/highlight.css">
@endpush
@section('content')
<article>{!! $post->body !!}</article>
@endsection
@push('scripts')
<script src="/js/highlight.js"></script>
@endpush
@prepend('scripts')
<script>console.log('This runs BEFORE other pushed scripts');</script>
@endprependModule 3 Review
Tip
Tip
Practice Blade Stacks push stack in small, isolated examples before integrating into larger projects. Breaking concepts into small experiments builds genuine understanding faster than reading alone.
Blade compiles to plain PHP - zero overhead in production
Practice Task
Note
Practice Task - (1) Write a working example of Blade Stacks push stack from scratch without looking at notes. (2) Modify it to handle an edge case (empty input, null value, or error state). (3) Share your solution in the Priygop community for feedback.
Common Mistake
Warning
A common mistake with Blade Stacks push stack is skipping edge case testing - empty inputs, null values, and unexpected data types. Always validate boundary conditions to write robust, production-ready laravel code.