Blog Detail

19

Oct
Create Inline Partials in your Blade Templates with Ease cover image

arrow_back Create Inline Partials in your Blade Templates with Ease

Laravel Blade Capture Directive is a fantastic package that introduces a new @capture directive that allows you to capture small parts of your Blade templates and re-use them later on without needing to extract them into partials.

Installation

You can install the package via Composer:

composer require ryangjchandler/blade-capture-directive

Usage

This package adds a new pair of directives: @capture and @endcapture.

The @capture directive will capture all of your Blade until it reaches an @endcapture directive. It takes the code and stores it inside a variable for usage later on.

@capture($hello)
    Hello, world!
@endcapture

The directive requires at least 1 argument. This argument should be a PHP variable that you would like to assign your partial to. The variable itself will become a Closure that can be invoked inside of Blade echo tags ({{ }}) anywhere after its definition.

@capture($hello)
    Hello, world!
@endcapture

{{ $hello() }}

The above code will invoke your captured Blade code and output Hello, world! when compiled by Laravel and rendered in the browser.

The @capture directive also supports arguments. This means you can capture generalized chunks of Blade and change the output dynamically. This is achieved by specifying a comma-separated list of PHP variables like so:

@capture($hello, $name)
    Hello, {{ $name }}!
@endcapture

The above code will require that a name is passed to $hello(), like below:

@capture($hello, $name)
    Hello, {{ $name }}!
@endcapture

{{ $hello('Ryan') }}

The Blade will compile this and your view will output Hello, Ryan!. Cool, right?

The list of arguments can be treated like any set of arguments defined on a function. This means you can assign default values and specify multiple arguments:

@capture($hello, $name, $greeting = 'Hello, ')
    {{ $greeting }} {{ $name }}!
@endcapture

{{ $hello('Ryan') }}
{{ $hello('Taylor', 'Yo, ') }}

The above code will now output Hello, Ryan! as well as Yo, Taylor!. This is really cool, I know!

Inheriting scope

All captured blocks will inherit the parent scope, just like a regular partial would in Blade. This means you can use any data passed to the view without having to pass it through to the block manually.

@php($name = 'Ryan')

@capture($hello)
    Hello, {{ $name }}!
@endcapture

{{ $hello() }}

If your captured block has a parameter with the same name as a predefined variable from the inherited scope, the block’s parameter will always take precedence.

For more details and source code, please visit Github.

Published at : 19-10-2022

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project