How to Create Custom Blade Directive in Laravel?

By Hardik Savani April 16, 2024 Category : Laravel

Hello all! In this article, we will talk about how to create custom blade directive in laravel. you'll learn laravel custom blade directives. We will use laravel create custom blade directives. we will help you to give example of custom blade directive laravel.

what is directive in laravel blade template. you can create your own @var, @if, @case directive that we help you to avoid write so many time same code and you can reuse it easily.

In this post, i will give you simple example of creating custom blade directives in laravel and you can easily use with laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 app. we will create @nl2br blade directive and use it with example. we almost need nl2br() for textarea value displcy. you can see bellow layout.

Preview:

Step 1: Create Custom Blade Directive

in app service provide file you have to declare custom blade directive. so let's add code as bellow:

app/Providers/AppServiceProvider.php

<?php
  
namespace App\Providers;
  
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
use Blade;
  
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
          
    }
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
  
        Blade::directive('nl2br', function ($string) {
            return "<?php echo nl2br($string); ?>";
        });
    }
}

Step 2: Create Route

now we will create one route for example how to use custom directives in laravel blade. let's add as bellow:

routes/web.php

Route::get('directive', function () {
      
    $body = '';
  
    if(request()->filled('body')){
        $body = request()->body;        
    }
  
    return view('directive', compact('body'));
});

Read Also: Laravel Ajax Render View With Data Example

Step 3: Create Blade File

Here, you need to use @nl2br directive in this blade file as like bellow:

routes/web.php

Read Also: Laravel Livewire Toastr Notifications Example
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  
<div class="container">
    <h1>How to create directive in Laravel? - ItSolutionStuff.com</h1>
  
    <form>
        <strong>Enter Something:</strong>
        <textarea name="body" class="form-control" style="height: 200px"></textarea>
  
        <button type="submit" class="btn btn-success">Submit</button>
    </form>
  
    <p>Body:</p>
    <p>@nl2br($body)</p>
</div>
  
</body>
</html>

you can try your own.

I hope it can help you.

Tags :
Previous

Laravel Livewire Change Event Example
Next

Laravel nl2br Blade Directive Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares