How to Create Custom Blade Directive in Laravel?

Custom Blade Directive
Custom Blade Directive

Hello Dev! Now In this article, i will talk about how to create a custom blade directive in laravel. From here You will learn laravel custom blade directives. We will use laravel create custom blade directives in here. i will give a example of custom blade directive laravel.

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

In this post, i will give you a simple example of creating custom blade directives in laravel and also you can easily use with laravel 6, laravel 7 and laravel 8 app. we will create @nl2br blade and we use it with example. Now we almost need nl2br() for text area value display. you can see bellow layout.

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:


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()
        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:


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

Read Also : Laravel 8 Pagination by using Ajax Example

Step 3: Create Blade File

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


<!DOCTYPE html>
    <link href="//" rel="stylesheet">
<div class="container">
    <h1>How to create directive in Laravel? - Codings Point</h1>
        <strong>Enter Something:</strong>
        <textarea name="body" class="form-control" style="height: 200px"></textarea>
        <button type="submit" class="btn btn-success">Submit</button>

you can try your own.

I hope it can help you. For More you can follow facebook


About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →