How to Create a Custom Blade Directive in Laravel 9?

Last updated on February 23, 2023

The directive is a short way to use PHP functions in the blade or view files. For example, in the view file, you can use the if-statement by the following example,

@if ($today === 'Sunday')
    It's the Weekend!
@else
    Go to Office!
@endif

This if-statement is a short way of actual if-statement that we write in core PHP. That means the actual if-statement is somewhere in Laravel’s file that runs when we call these directives.

In this article we will be creating custom directives, let’s get started.

Laravel Custom Directive

When it comes to directives, it can be an if-statement and function that simply takes an argument and returns something. So let’s categorize it,

  1. Conditional Directive
  2. Helper Directive

1. Conditional Directive

In this directive, we will create an if-statement that will be either true or false. Suppose we have two routes, one for the fruit list page and another for the vegetable list page. These routes load the same blade file from the views directory. In this case, we need to check if we are on the vegetable page, so let’s create a directive that will help us to indicate the current page for the vegetable list.

Step 01: Create Routes

Create two routes that should load list.blade.php from the views directory. We always create routes in routes/web.php for the web.

Route::get('/fruit-list', function () {
    return view('list');
});
 
Route::get('/vegetable-list', function () {
    return view('list');
});

Step 02: Create Directive

Next, go to the Providers directory and open AppServiceProvider.php where we will add a directive. Before adding any directive we need to add the Blade facade, so add the below code.

use Illuminate\Support\Facades\Blade;

Now in the boot() method, add the below script that creates directives.

Blade::directive('isVeg', function(){
    $isVegetablePage = false;
    if(request()->is('/vegetable-list')){
        $isVegetablePage = true;
    }

    return "<?php if($isVegetablePage){ ?>";

});

Blade::directive('notVeg', function () {
    return "<?php }else{ ?>";
});

Blade::directive('endVeg', function () {
    return "<?php } ?>";
});

You can see we have added three directives. The first directive name is isVeg and it has an if-statement that checks if the current URL has /vegetable-list

if(request()->is('/vegetable-list')){
        $isVegetablePage = true;
}

In the second directive, we start the else statement, and similarly in the last or endVeg else statement ends.

Step 03: Create Blade file and Check Directive

Create a list.blade.php file in the resources/views directory and add the below code to use the directive.

@isVeg
    <p>Vegetable Page</p>
@notVeg    
    <p>Not Vegetable Page</p>
@endveg

The above directive simply runs the if-statement that we created in the AppServiceProvide.php. It means it would print Vegetable Page when you open the vegetable page and else it would print the Not Vegetable Page.

Below is the complete code of list.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Custom blade directive in Laravel Framework</title>
    </head>
    <body>
        @isVeg
            <p>Vegetable Page</p>
        @notVeg    
            <p>Not Vegetable Page</p>
        @endveg
    </body>
</html>

2. Helper Directive

We have learned conditional directives in which we use if-statement. A helper directive is similar to a helper function, it is not mentioned officially but I take it this way. To understand this directive we will create a directive that will simply capitalize the first letter of the word. Let’s get started.

Go to AppServiceProvider.php located in app/Providers directory and add the below directive into the boot() method,

Blade::directive('nice', function($name){
    return "<?php echo ucwords($name); ?>";
});

This directive name is nice. It has a parameter that is $name and it simply capitalized the first letter of the word. Now we can use the nice directives in the blade file. Below are the examples,

@nice('john')
// Output: John

@nice('john smith')
// Output: John Smith

In the above example, we used a word and phrase to test the nice directive.

Conclusion

In the Laravel framework, directives simply run predefined PHP code in the way in blade files. In this article we have learned to create conditional and helper directives.


Written by
I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on:

Related Posts

Tags: Laravel,